vue2使用pinia并且持久化

安装：
// 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')

image.png

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 //导出

image.png

页面使用

image.png

持久化的需要安装 pinia-plugin-persist 这个插件 然后上面图片上面有如何使用