vuex、pinia数据持久化

vuex可以进行全局的状态管理，但刷新后状态会重置。

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。 vuex劣势：刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

vuex-persistedstate插件

vue-persistedstate - npm (npmjs.com)

安装

npm install vuex-persistedstate --save

1.使用vuex-persistedstate默认存储到localStorage

// store/index.js
import { createStore } from 'vuex
import createVuexPersistedState  from "vuex-persistedstate"
import user from './modules/user'
const store = createStore({
    modules: {
        user
    },
    plugins:[createVuexPersistedState({
        key: '自定义key',
        storage:window.localStorage,// 存储缓存方式
        whiteList:[], // 白名单：为空或不设置为全部缓存，默认为全部缓存，白名单可设置为缓存其他键不缓存
        blackList: [],
        paths: []// 存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如`user.token`
    })]
})
export default store 

vuex-persist - npm (npmjs.com)

pinia数据持久化

安装

npm i pinia-plugin-persist

1.pinia-plugin-persistedstate

// main.js
import { createApp } from 'vue'
import './style.css'
import store from './store'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(store).use(router).mount('#app')

// store/index.js
import { createPinia } from 'pinia'
// 引入pinia持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)
export default store

// store/user.js
import { defineStore } from 'pinia'
export const user = defineStore('user', {
    state: () => {
        return {
            num: 0,
            name: '张三'
        }
    },
    getters: {
        changeNum() {
            return this.num + 1000
        }
    },
    actions: {
        upNum(val) {
            this.num += val
        }
    },
    persist: {
        // 开启持久化
        enabled: true,
        strategies: [
            { 
                storage: localStorage, // 指定存储方式
                key: "localStorage",
                paths: ['name']
            }
        ]
    }
})