vue3 ts 中使用 pinia 的问题

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia

在vue根组件外使用pinia的store会有这个错误，按官方教程的使用方法如下

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

如果是这样pinia是在main方法中初始化的并且只在vue根实例上引用到了。只需要将pinia的实例放在单独的文件中导入，在需要的的地方导入即可。

1.创建一个ts文件，存放单独的实例

//piniaInstance.ts
import { createPinia } from "pinia";
//所有需要使用到pinia的地方都引用这一个实例，如果在main中初始化则在vue根组件外无法使用。
const pinia = createPinia()
export default pinia

2.main.ts

//main.ts
import { createApp } from 'vue' 
import pinia from './stores/piniaInstance'
import App from '@/App.vue'
import router from '@/router' 
   
//在这里use同一个实例
app.use(pinia)
app.use(router)  
app.mount('#app')

 

3报错的页面使用pinia，在usexxxStore()传入pinia实例

//xx.ts 
import { usexxxStore } from "@/stores/runingFunStore";
import pinia from '@/stores/piniaInstance';
import {ref} from "vue"; 

//这里需要传递同一个pinia实例
const xxxStore = usexxxStore(pinia)

还有一个问题是在定义store的actions中使用this的时候ts提示未定义或找不到，例如：

export const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      //此处没有问题
      this.count++
    },
    randomizeCounter:()=> {
       //此处使用箭头函数this无效
      this.count = Math.round(100 * Math.random())
    },
  },
})

另外ts中定义store还需要使用泛型defineStore方法，否则在使用usexxxStore的时候所有类型都是never，而定义泛型的类型特别费事，所以在ts中正确的使用pinia是采用组合式Api，即可以避免箭头函数的this错误，也能够自动推断出data的数据类型。

例如：

//第二个参数使用箭头函数，而不是{}
export const useCounterStore = defineStore('counter', () => { 

 //相当于data
  const count = ref(0)
 
//相当于action
  function increment() {
    //不需要this，直接调用    
    count.value++ 
  }

//最后返回需要导出的内容
  return { count, increment }
})