简介：Vuex是一个仓库，是vue的状态管理工具，存放公共数据，任何组件都可以使用vuex里的公共数据。Vuex提供了插件系统，允许我们使用 vuex-persistedstate插件，将Vuex的状态持久化到本地存储中，解决页面刷新或重新打开应用时状态丢失的问题；这里记录一下Vuex数据持久化的几种实现方案。
⭐这里先介绍一下Vuex里面属性及使用
1、属性介绍
//1、state存放状态和数据state: {flag: 0,},//2、mutations修改状态和数据mutations: {defineTest(state, i) {state.flag = i;}},//3、getters计算属性getters: {},//4、actions异步操作actions: {},//5、modules模块化modules: {},//6、持久化插件plugins: [vuexPersistedState({storage: window.localStorage, // 指定存储引擎 }),],
2、页面调用
//state的调用方式 1computed: { ...mapState(['flag']) // 将 this.$store.state.count 映射为组件内的 count 计算属性 },<div>{{ flag }}</div> //state的调用方式 2<div v-if="this.$store.state.flag">测试数据</div>//mutations的调用方式 1methods: { // 将 this.increment() 映射为this.$store.commit('increment') ...mapMutations(['increment']), // 触发事件this.increment();} //mutations的调用方式 2this.$store.commit('defineTest', i)//actions的调用方式this.$store.dispatch('someAction', payload);⭐Vue2中，Vuex状态、数据持久化
一、通过手写函数和plugins，实现状态、数据持久化话；
1、新建pluginPersist.js文件，并导出存储函数
/*** * @param {状态、数据持久化} store */
export default function (store) {// console.log(store);// 存const KEY = 'VUEX:STATE';//这里表示 页面关闭 或 刷新 时存储window.addEventListener("beforeunload", () => {localStorage.setItem(KEY, JSON.stringify(store.state))})// 取try {const state = JSON.parse(localStorage.getItem(KEY));if (state) {store.replaceState(state);}} catch (err) {console.log(err);}
}2、在store中，在plugins里引入挂载使用；plugins插件中的函数会在创建仓库时执行，插件的本质就是一个函数
import Vue from 'vue'
import Vuex from 'vuex'
import pluginPersist from "./pluginPersist"Vue.use(Vuex)const store = new Vuex.Store({state: { // ...状态、数据 }, mutations: { // ...修改状态、数据}, actions: { // ...动作函数 }, getters: { // ...计算属性}, modules: {// ...模块化},//这里使用plugins: [pluginPersist],})export default store;
二、通过手写db对象方法，实现数据、状态持久化；
1、新建localStorage.js文件，创建db对象，然后导出db方法
var localStorage = window.localStorage;
const db = {/** * 更新状态 */save(key, value) {// console.log(key, value);// 页面关闭或刷新时存储// window.addEventListener("beforeunload", () => {// localStorage.setItem(key, JSON.stringify(value))// })// 触发该事件时存储 二选一localStorage.setItem(key, JSON.stringify(value));},/** * 获取状态，如果有状态值，获取最新状态值；如果没有，获取默认值 */get(key, getSaveVal = null) {// console.log(key, getSaveVal);try {return JSON.parse(localStorage.getItem(key)) || getSaveVal;} catch (err) {console.log(err);}},/** * 移除状态 */remove(key) {// console.log(key);localStorage.removeItem(key);},/** * 清空状态 */clear() {localStorage.clear();}
};
export default db;2、在store中引入使用
import Vue from 'vue'
import Vuex from 'vuex'
import db from './localStorage';Vue.use(Vuex)const store = new Vuex.Store({state: {// 初始化时 默认获取state1: db.get('STATE1') || null,},mutations: {SET_STATE1: (state, value) => {state.state1++//调用SET_STATE1方法时 这里存储db.save('STATE1', state.state1);},},actions: { // 动作函数 }, getters: { // 计算属性}, modules: {// 模块化},// 插件plugins: [],})export default store
3、组件中调用SET_STATE1方法，并传值data
methods: {choseBtn(){this.$store.commit("SAVE_DOTS", this.data);}
},三、通过vue插件vuex-persistedstate 或 vuex-plugin-persistedstate实现数据、状态持久化；
1、安装依赖
npm install vuex-persistedstate --save
//或者
cnpm install vuex-persistedstate --save
//或者
yarn add vuex-persistedstate--save是安装在生产环境，开发和生产都需要用到//查看插件的依赖项
npm ls vuex-persistedstate
Tips：vuex-persistedstate 和 vuex-plugin-persistedstate 是同一个插件的不同引用方式，它们都是用来持久化 Vuex 状态管理的插件，可以将 Vuex 中的状态保存到本地存储（如 localStorage 或 sessionStorage）中，以便在刷新页面或重新打开应用时恢复这些状态；persist目前已经弃用；
2、引入使用
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'; Vue.use(Vuex); export default new Vuex.Store({ state: { // ...你的状态定义 }, mutations: { // ...你的变更函数定义 }, actions: { // ...你的动作函数定义 }, getters: { // ...你的计算属性定义 }, modules: {// ...模块化},plugins: [ createPersistedState({ storage: window.localStorage, // 或者使用 sessionStorage }), ],
});3、注意事项：
-
createPersistedState 函数创建了一个插件实例；
-
可以将存储选项（如 localStorage 或 sessionStorage）作为参数传递给它，插件默认使用 localStorage，但是可以根据需要选择其他存储方式；
-
vuex-persistedstate 插件默认会持久化 Vuex 中的所有状态，如果你只想持久化部分状态，可以通过配置插件的 paths 选项来实现
createPersistedState({ storage: window.localStorage, // 只持久化这些路径下的状态 paths: ['some', 'partial', 'state']
})
在上面的配置中，只有 state.some/partial/state 路径下的状态会被持久化；其它状态在页面刷新或重新加载时不会得到恢复。
⭐Vue3中，Vuex状态、数据持久化，
Vue3中的数据、状态持久化，可以通过Pinia插件实现，是vue3官方指定的持久化实现方案，地址在这：
Pinia官网
https://pinia.vuejs.org/zh/
