安装:
// npm i pinia --save
// Vue2 需要额外安装 npm i pinia @vue/composition-api --save
mainn.js
// 引入pinia
import {createPinia,PiniaVuePlugin} from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()//需要挂载在实例上
new Vue({
pinia,
render: h => h(App),
}).$mount('#app')
import { defineStore } from 'pinia' //引入
const useStore = defineStore('storeId', {
// arrow function recommended for full type inference
state: () => {
return {
counter: 0,
name: 'Eduardo',
isAdmin: true,
}
},
getters: {
},
actions: {
increment() {
this.counter++
}
},
// 开启持久化
persist: {
enabled: true,//开始数据缓存
strategies: [
{
// storage: localStorage,//默认是sessionStorage
paths: ['counter'],//指定需要持久化存储的数据
}
]
}
})
export default useStore //导出
页面使用
持久化的需要安装 pinia-plugin-persist 这个插件 然后上面图片上面有如何使用