当前位置: 首页>后端>正文

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')

vue2使用pinia并且持久化,第1张

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

vue2使用pinia并且持久化,第2张

页面使用


vue2使用pinia并且持久化,第3张

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


https://www.xamrdz.com/backend/3k51941637.html

相关文章: