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

1、原因

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

2、解决

使用localStorage存储一份

（1）storage.js

/**
* vuex localStorage plugin
*/
const IS_ALL = 0
export 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.length
for (; 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.length
for (; 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)
)
)
// 持久化state
store.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中被保存了：