pinia

简介

vitescv的pinia模块,集成pinia-plugin-persistedstate，支持store的持久化

安装

pnpm add @vitescv/pinia

使用

配置

#在config.js中配置
modules:{
  ...
  "@vitescv/pinia":{
    // 预设的store
    'user':'./store/user.js',
    ...
  }
}

配置后在应用的上下文Context中提供了Pinia对象，和vue示例中的this.Pinia方便其他模块使用，API如下:

// 
pinia,             //当前pinia实例 ,一般在模块中app未初始化时，配合useStore用
getUseStore(),    //获取某个配置中预设的store的useStore方法
/**---- 以下是Pinia的自有API------**/
defineStore,mapState,mapActions,mapWritableState,mapStores,

store文件, vue2,所以还是使用 Option Store, 这里只提供store体就行，模块会自动调用defineStore初始化，文件名即store名.

//  ./store/user.js
export default {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
  persist: true,     //开启持久化
}
// 模块中使用
const useUserStore = context.Pinia.stores.user
// 页面中使用
const useUserStore = this.Pinia.getUseStore('user')

const userStore = useUserStore()