安装插件
引入
// main.js
import {
createSSRApp } from "vue";
import * as Pinia from "pinia";
import {
createUnistorage } from "pinia-plugin-unistorage";
export function createApp() {
const app = createSSRApp(App);
const store = Pinia.createPinia();
// 关键代码 👇
store.use(createUnistorage());
app.use(store);
return {
app,
Pinia, // 此处必须将 Pinia 返回
};
}
初始化
根目录创建store文件夹，在该文件夹内添加pinia2.ts文件，内容如下：
import {
defineStore
} from "pinia";
export const useStore = defineStore("pinia2", {
state() {
return {
someState: "hello pinia",
token: ''
};
},
unistorage: true, // 开启后对 state 的数据读写都将持久化
// unistorage: {
// // 初始化恢复前触发
// beforeRestore(ctx) {},
// // 初始化恢复后触发
// afterRestore(ctx) {},
// serializer: {
// // 序列化，默认为 JSON.stringify
// serialize(v) {
// return JSON.stringify(v);
// },
// // 反序列化，默认为 JSON.parse
// deserialize(v) {
// return JSON.parse(v);
// },
// },
// key: "foo", // 缓存的键，默认为该 store 的 id，这里是 main,
// paths: ["foo", "nested.data"], // 需要缓存的路径，这里设置 foo 和 nested 下的 data 会被缓存
// }
});
// setup 语法也支持
// export const useStore = defineStore(
// "main",
// () => {
// const someState = ref("hello pinia");
// return { someState };
// },
// {
// unistorage: true, // 开启后对 state 的数据读写都将持久化
// },
// );
页面使用
<script>
import {
useStore
} from '@/store/pinia2.ts'
const pinia2 = useStore()
export default {
data() {
return {
}
},
methods: {
startLogin() {
console.log('count--------->1', pinia2.token);
pinia2.token = '接口返回的token值'
console.log('count--------->2', pinia2.token);
},
}
}
</script>
