vuex可以進行全局的狀態管理，但刷新后刷新后數據會消失，這是我們不願意看到的。怎么解決呢，我們可以結合本地存儲做到數據狀態持久化，也可以通過插件vuex-persistedstate。
1.手動利用HTML5的本地存儲
方法
1、vuex的state在localStorage或sessionStorage中取值；
2、在mutations中,定義的方法里對vuex的狀態操作的同時對存儲也做對應的操作。
這樣state就會和存儲一起存在並且與vuex同步
2.利用vuex-persistedstate插件
插件的原理其實也是結合了存儲方式,只是統一的配置就不需要手動每次都寫存儲方法。
使用方法
安裝
npm install vuex-persistedstate --save
引入及配置：在store下的index.js中
import createPersistedState from "vuex-persistedstate"
conststore =newVuex.Store({
// ...
plugins: [createPersistedState()]
})
默認存儲到localStorage
想要存儲到sessionStorage，配置如下
import createPersistedState from "vuex-persistedstate"
conststore = newVuex.Store({
// ...
plugins: [createPersistedState({
storage:window.sessionStorage
})]
})
默認持久化所有state
指定需要持久化的state,配置如下
import createPersistedState from "vuex-persistedstate"
conststore = newVuex.Store({
// ...
plugins: [createPersistedState({
storage:window.sessionStorage,
reducer(val) {
return {
// 只儲存state中的assessmentData
assessmentData: val.assessmentData
}
}
})]
}）
vuex引用多個插件的寫法
譬如：vuex提示的插件和持久化的插件一起使用，配置如下
import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判斷環境 vuex提示生產環境中不使用
constdebug = process.env.NODE_ENV !== 'production'
constcreatePersisted = createPersistedState({
storage:window.sessionStorage
})
exportdefaultnewVuex.Store({
// ...
plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})
plugins要是一個一維數組不然會解析錯誤
作者：無腳鳥30
鏈接：https://www.jianshu.com/p/e88ab068820b
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。