简介：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的调用方式 1
computed: {
...mapState(['flag']) // 将 this.$store.state.count 映射为组件内的 count 计算属性
},
<div>{{ flag }}</div>
//state的调用方式 2
<div v-if="this.$store.state.flag">测试数据</div>
//mutations的调用方式 1
methods: {
// 将 this.increment() 映射为this.$store.commit('increment')
...mapMutations(['increment']),
// 触发事件
this.increment();
}
//mutations的调用方式 2
this.$store.commit('defineTest', i)⭐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/
