下文代码基于
- vue 3.x
- pinia 2.x
定义
pinia/index.ts
import { useUserStore } from './user';
// 统一导出useStore方法
export const useStore = () => {
return {
user: useUserStore(),
};
};
pinia/user.ts
import { defineStore } from 'pinia';
interface UserStore {
name: string;
}
export const useUserStore = defineStore('user', {
state: (): UserStore => ({
name: '',
}),
getters: {
myName: (state) => {
return state.name;
}
},
actions: {
setName(name: string) {
this.name = name;
},
clearName() {
this.setName('');
},
},
// 开启数据持久化
// 1.所有数据持久化
// persist: true,
// 2.持久化存储插件自定义配置
persist: {
// 修改存储中使用的键名称，默认为当前 Store的 id
key: 'USER_KEY',
// 修改为 sessionStorage，默认为 localStorage
storage: window.sessionStorage,
// 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化（默认为 undefined ，持久化整个状态）
paths: ['name'],
},
});
index.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
// pinia 数据持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';
/**
* pinia
*/
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia).mount('#app');
使用
xxx/xx.vue（vue setup）
import { useStore } from '@/pinia';
const { user } = useStore();
console.log(user.name);
user.clearName();
// ...
注意：
useStore()在非setup环境下，需要包含在方法中调用
