页面刷新 vuex 数据重新被初始化

1、原因

vuex里用来存储的也只是一个全局变量，当页面刷新，该全局变量自然不存在了。

2、解决

使用localStorage存储一份

（1）storage.js

/*** vuex localStorage plugin*/ const IS_ALL = 0export default function storagePlugin({namespace = 'mfg-vux-',storage = localStorage,persistence = [] } = {}) {let serialize = JSON.stringify,deserialize = JSON.parse,isAll = persistence.length === IS_ALL/*** 获取持久化的state* @param {[type]} state [description]* @return {[type]} [description]*/function getState(state) {let data = {},keys = isAll ? Object.keys(state) : persistence,i = 0,len = keys.lengthfor (; i < len; i ) {let key = keys[i],value = deserialize(storage.getItem(namespace key))data[key] = value === null ? state[key] : value}return data}/*** 持久化state* @param {[type]} state [description]*/function setState(state) {let keys = isAll ? Object.keys(state) : persistence,i = 0,len = keys.lengthfor (; i < len; i ) {let key = keys[i]storage.setItem(namespace key, serialize(state[key]))}}return store => {let state = store.state// 初始化state store.replaceState(_.merge({},state,getState(state)))// 持久化statestore.subscribe((mutation, state) => {setState(state)})} }

（2）vuex部分代码

import storage from './plugins/storage' export default new Vuex.Store({state,mutations,getters,actions,plugins: [storage({// 要保存的变量persistence: ['testText']})],strict: process.env.NODE_ENV !== 'production' })

变量在localestorage中被保存了：

 

更多专业前端知识，请上 【猿2048】www.mk2048.com 创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的页面刷新 vuex 数据重新被初始化的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。