vue3中使用pinia并持久化小结

 0 0条评论

之前一直在项目中使用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)之后了。

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客