npm i pinia-plugin-persist --save --include=dev
// 或者使用 yarn 安装
yarn add pinia-plugin-persist
安装完成之后,我们可以在main.js 或者 main.ts 中引入。具体代码如下:
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
// 下面是我们安装的固化插件。
import piniaPersist from 'pinia-plugin-persist'
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPersist);
// 特别注意:固化插件是 pinia.use 并不是 app.use
app.use(pinia);
app.mount('#app')
具体模块中的使用看下面的代码:
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
state(){
return {
count: 10,
num: 20
}
},
persist: { // 固化插件
enabled: true, // 开启存储
strategies: [ // 指定存储的位置以及存储的变量都有哪些,该属性可以不写,
//在不写的情况下,默认存储到 sessionStorage 里面,默认存储 state 里面的所有数据。
{ storage: localStorage, paths: ["count"] },
// paths 是一个数组,如果写了 就会只存储 count 变量,当然也可以写多个。
]
},
getters:{
},
actions:{
piniaAdd(){
this.count++;
}
}
})