【Vue】Vuex数据持久化(手动存储和vuex-persistedstate插件)
手动存储
- 在根组件.vue( App.vue)中添加如下代码
created () {
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
try {
sessionStorage.getItem('store') && this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
} catch (err) {
console.log(err)
}
sessionStorage.removeItem('store')
}
vuex-persistedstate
npm i 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: {
a: "",
b: ""
}
});
...