为什么我的Pinia store的getters取值始终为undefined？

核心问题原因 #

1. Pinia版本不匹配
   你安装的pinia@next对应Pinia 3.x版本，仅支持Vue 3，Vue 2项目必须使用2.x版本的Pinia。
2. 注册流程不符合Vue 2要求
   Vue 2本身不内置组合式API，需要额外安装依赖，且Pinia的注册顺序、挂载方式需要严格遵循Vue 2的适配规则。

修复步骤 #

1. 替换为适配Vue 2的依赖版本

先卸载错误版本的Pinia，安装适配Vue 2的2.x版本，同时安装Vue 2组合式API依赖：

# 卸载错误版本
npm uninstall pinia
# 安装正确版本依赖
npm install pinia@2 @vue/composition-api

2. 修正入口文件注册逻辑

按如下顺序调整你的入口文件（通常为main.js）的注册代码：

import Vue from 'vue'
import App from './App.vue'
import VueCompositionAPI from '@vue/composition-api'
import { createPinia, PiniaVuePlugin } from 'pinia'

// 必须先注册组合式API
Vue.use(VueCompositionAPI)
// 注册Pinia适配插件
Vue.use(PiniaVuePlugin)
// 初始化Pinia实例
const pinia = createPinia()

new Vue({
  render: h => h(App),
  // 把pinia实例挂载到根Vue实例上
  pinia
}).$mount('#app')

3. 可选优化

如果修改版本和注册逻辑后仍有问题，可以把getter的箭头函数改为普通函数，通过this访问state，写法更符合Pinia的设计规范：

export const useStore = defineStore('main', {
  state: () => ({
    counter: 1,
  }),
  getters: {
    doubleCount() {
      return this.counter * 2
    },
  },
})

内容的提问来源于stack exchange，提问作者tonsteri