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 数据重新被初始化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。