简介: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)
//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/