vue3+ts+pinia数据持久化统一封装使用

相比vue2的vuex，vue3更推荐使用pinia来对数据进行共享化处理，下面是pina使用的案例，这里分成几个模块并导出使用，这样方便各个模块数据管理，如果不对，欢迎大家来指出

下载pinia 和持久化pinia-plugin-persistedstate

 npm i pinia  pinia-plugin-persistedstate

在main.ts导入pinia

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia)

新建store/user.ts

这里的state定义的都是共享数据
getters相当于计算属性
actions相当于mutation+actions组合了，这里不像vuex中分开，而且合在一块了，很方便
这里下载了pina数据持久化pinia-plugin-persistedstate 跟pina一样安装引入即可这里就不描述了，下面代码有注释说明
导出模块useUserStore

import { defineStore, acceptHMRUpdate } from 'pinia';
const useUserStore = defineStore('user', {
  state: () => ({
    name: '五五',
    age: 3,
  }),
  getters: {},
  actions: {
    updateState(obj: {name: string, age:number}) {
      this.name= obj.name;
      this.age= obj.age;
    },
  },
  // 所有数据持久化
  // persist: true,
  // 持久化存储插件其他配置
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: 'user',
    // 修改为 sessionStorage，默认为 localStorage
    storage: sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    // paths: [],
  },
});
// Pinia 是 vuex 新替代方案。Pinia 中热更新实现，借助 import.meta
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));
}
export default useUserStore;

新建store/index.ts

import useUserStore from './user'

// 统一导出useStore方法
export default function useStore() {
  return {
    user: useUserStore(),
  }
}

使用

这里storeToRefs为把pinia中的数据取出来，而且还是响应式的
调用pinia中的方法为user.updateState(传入的数据)

import { storeToRefs } from 'pinia';
import useStore from '../../store';
const { user } = useStore();
const { name} = storeToRefs(user);
user.updateState(‘改名’)

这样就成功使用Pina了