vue3中使用pinia并持久化小结

之前一直在项目中使用vuex，其他理论性的区别我就不多说了，我就说说实际操作中的感受吧。

1，方便很多，真的方便很多，少写不少代码。

2，ts支持很好，之前vuex要支持ts实在太麻烦了，配置就要写半天。

话不多说先安装，后面一个是持久化的，别说你用sotre不持久化哦？所以两个一起安装吧

npm install pinia,pinia-plugin-persistedstate

新建store文件夹，结构如下：

其中ref.ts就是抛出一个对象让main引用，很简单。

import { createPinia } from 'pinia'
import Plugin from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(Plugin)
export default pinia

然后在main.ts中引用

import pinia from "@/store/ref"
const app = createApp(App)
app.use(pinia)

这样项目中就可以使用pinia了。

sotre/index.ts文件夹，我是一个总的模块入口，每一个sotre对应modules下不同的文件，可能这个习惯也是跟之前使用vuex有关吧，反正大家根据自己习惯来即可。

以下是index.ts代码，非常简单，仅仅是引入moudels下的模块，再导出。

import useMemberStore from './modules/member'
import useExamStore from './modules/examTime'
import useAudioStore from './modules/audio'
export default function useStore() {
    return {
        member:useMemberStore(),
        exam:useExamStore(),
        audio:useAudioStore()
	}
  }

中间就是modules下的文件，这才是pinia的核心代码，以audio为例吧：

import { IQAProjectAudio } from '@/types/QA/project'
import { defineStore } from 'pinia'
const useAudioStore = defineStore('audio', {
    state: () => {
        return {
            url: '',
            isAuto: false,
            isLoop: false
        }
    },
    getters: {

    },
    // 持久化存储插件其他配置
    persist: {
        storage: window.sessionStorage,
    },
    actions: {
    /**
    * 设置audio数据
    * @param data 
    */
    set(data: IQAProjectAudio) {
        this.url = data.url
        this.isAuto = data.isAuto
        this.isLoop = data.isLoop
        }
    }
})

export default useAudioStore

state就是要保存的数据，必须放在匿名函数中。getters和actions就跟vuex中一样，pinia中不分异步同步函数了，统一放在actions中，persist就是持久化属性了，如果不写这个属性，则当前的store就不会持久化哦。

我这里提一下，在pinia中，更改state数据的方式有好多种，可以通过$patch方法，还可以直接修改属性，这是在vuex中不允许的。我呢，可能还是vuex使用久了，还是习惯在actions操作state，这个大家请随意吧。

之后在vue中间引入即可操作sotre啦。

import useStore from '@/store'
const { audio } = useStore()

这里的autio就是modules下的aduio对象啦。

可以通过audio.set()方法改变state哦。

最后我要说一下，在非vue文件中使用，也就是说在外部ts文件使用pinia时，会出现一个问题：

getActivePinia was called with no active Pinia. Did you forget to install pinia?

网上解决方法一大堆，就是pinia还没有激活的时候，就已经使用pinia了。

这里你就要看看ts文件执行的顺序，是否在mian文件中，app.use(pinia)之后了。