为了在页面刷新后保留状态，我们可以使用 pinia-plugin-persistedstate 插件来实现状态持久化存储。
1. 安装持久化插件pinia-plugin-persistedstate
1. 安装依赖
1
| npm install pinia-plugin-persistedstate
|
2. 将插件添加到 pinia 实例上
在 main.js 中添加插件配置。
1
2
3
4
5
6
| import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const store = createPinia();
store.use(piniaPluginPersistedstate);
|
2. 用法
1. 基本使用
在 store 中启用状态持久化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| import { defineStore } from 'pinia';
export const useUserStore = defineStore(
'user',
() => {
const token = ref<string>();
const setToken = (value: string) => {
token.value = value;
};
const clearToken = () => {
token.value = void 0;
};
return {
token,
setToken,
clearToken,
};
},
{
persist: true,
},
);
|
2. 高级使用
可以自定义持久化的配置，如存储的 key 和使用的存储方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| import { defineStore } from 'pinia';
export const useUserStore = defineStore(
'user',
() => {
const token = ref<string>();
const setToken = (value: string) => {
token.value = value;
};
const clearToken = () => {
token.value = void 0;
};
return {
token,
setToken,
clearToken,
};
},
{
persist: {
key: 'userStore',
storage: localStorage,
},
},
);
|