清空原因：

刷新頁面vuex的數(shù)據(jù)會丟失屬于正?，F(xiàn)象，因為JS的數(shù)據(jù)都是保存在瀏覽器的堆棧內(nèi)存里面的，刷新瀏覽器頁面，以前堆棧申請的內(nèi)存被釋放，這就是瀏覽器的運行機制，那么堆棧里的數(shù)據(jù)自然就清空了。

解決辦法：

1.手動存儲

state: {role: localStorage.getItem('role') || '',token: localStorage.getItem('token') || '',
},
actions: {login ({ commit }, { token, role }) {localStorage.setItem('token', token)localStorage.setItem('role', role)commit('setToken', token)commit('setRole', role)}
}

使用localStorage或sessionStorage將vuex存儲的數(shù)據(jù)直接存儲在本地。

2.插件存儲

本質(zhì)上是自動存儲在localStorage或sessionStorage中。

a.vuex-persistedstate

npm install --save vuex-persistedstate

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'Vue.use(Vuex)export default new Vuex.Store({plugins: [createPersistedState()],state: {},getters: {},mutations: {},actions: {},modules: {}
})

b.vuex-along

npm install vuex-along --save

import VueXAlong from 'vuex-along'Vue.use(Vuex)
const store=new Vuex.Store({modules:{},plugins: [VueXAlong({name: 'along',     //存放在localStroage或者sessionStroage 中的名字local: false,      //是否存放在local中  false 不存放 如果存放按照下面session的配置配session: { list: [], isFilter: true }   //如果值不為false 那么可以傳遞對象 其中 當(dāng)isFilter設(shè)置為true時， list 數(shù)組中的值就會被過濾調(diào),這些值不會存放在seesion或者local中})]})

c.vuex-persist

npm install --save vuex-persist

import VuexPersistence from 'vuex-persist'
Vue.use(Vuex)const vuexLocal = new VuexPersistence({storage: window.localStorage
})const store = new Vuex.Store({modules:{},plugins: [vuexLocal.plugin] })