vuex替代品pinia学习

package.json版本

 "pinia": "^2.0.28",

min.js注册

import { createPinia } from 'pinia'
const app = createApp(App);
// 如果你ts也报错可以使用我这个办法
app.use(createPinia() as any);

创建一个piniaStore

import { defineStore } from 'pinia' //引入pinia
 
//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const usePublicStore = defineStore("publicStore",{ 
	state: () =>{
		return  ({
            accessToken: ''
        }) //为了避免出错，返回的值用()包起来
	},
    actions: {
        setAccessToken(accessToken: string) {
            this.accessToken = accessToken;
        }
    },
    getters:{
        getAccessToken(state) {
            return state.accessToken;
        }
    },
})

组件中使用

/* 组件 $patch 直接修改
import { usePublicStore } from "@/store/publicStore";
const publicStore = usePublicStore();
// template使用
<div>{{publicStore.accessToken}}</div>
// $patch函数修改
publicStore.$patch((state) => {
    state.accessToken = "哈哈哈哈";
});
// $patch直接修改
publicStore.$patch({ accessToken: "哈哈哈哈"});
// 使用actions 
publicStore.setAccessToken('123456');
// 重置
publicStore.$reset();
// 覆盖 publicStore.$state = { counter: 666, name: 'Paimon' }
publicStore.$state.value = {};
// 订阅
/*
@params mutation: {
	events：当前state改变的具体数据，包括改变前的值和改变后的值等等数据
  storeId：是当前store的id
  type：{用于记录这次数据变化是通过什么途径，主要有三个分别是
  	"direct"：通过 action 变化的
    "patch object"：通过 $patch 传递对象的方式改变的
    "patch function"：通过 $patch 传递函数的方式改变的
  }
}
*/
const subscribe = publicStore.$subscribe((mutation, state) => {
    console.log(mutation, state);
}, {detached: false});
/*detached:布尔值，默认是 false，
正常情况下，当订阅所在的组件被卸载时，订阅将被停止删除
如果设置detached值为 true 时，即使所在组件被卸载，订阅依然在生效
参数还有immediate，deep，flush等等参数 和vue3 watch的参数是一样的
*/
subscribe(); // 停止订阅
publicStore.$unsubscribe((mutation, state) => {
    console.log(mutation, state);
});
// watch监听
watch(
  publicStore.state,
  (newVal, oldVal) => {
  },
  { deep: true }
)

持久化缓存-其实就是存localStorage

// 下载
npm install pinia-plugin-persist --save
// min.js注册
import piniaPluginPersist from 'pinia-plugin-persist';
const pinia: any = createPinia();
pinia.use(piniaPluginPersist);
// ... 
const app = createApp(App);
app.use(pinia);

// 使用
export const usePublicStore = defineStore("publicStore", {
  state: () =>{
      return  ({
      	accessToken: ''
      })
    },
    actions: {},
    getters:{},
    //缓存配置
    persist: {
        enabled: true, // 开启
        strategies: [
          {
              // 缓存的模块名称,对应缓存中的密钥key
              key: "MY_PUBLIC_STORE",
              // 保存位置，默认保存在sessionStorage
              storage: localStorage,
              // 缓存哪些状态
              paths: ["accessToken"]
          }
        ]
    }
})