vuex 中的数据持久化存储
Vuex 的使用:https://blog.csdn.net/Jie_1997/article/details/107228246
Vuex 中 store 保存的数据,刷新页面时会清空,如何解决刷新页面时 store 中存储的数据不丢失?
一. 无需插件实现
- 更改
store.js
文件state
的定义:
state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): { userData: {} },
- 在
App.vue
中添加:
mounted() { window.addEventListener('unload', this.saveState) }, methods: { saveState() { sessionStorage.setItem('state', JSON.stringify(this.$store.state)) }, },
二. 使用 vuex-persist 插件实现
-
安装 vuex-persist
npm install vuex-persist --save
-
引入vuex-persist
import VuexPersist from 'vuex-persist'
-
创建对象,借助浏览器缓存,存入localStorage
const vuexLocal = new VuexPersist({ storage: window.localStorage // 可选存储方式 })
-
vuex.Store 中引入该插件
plugins: [vuexLocal.plugin]
-
一个实例:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 引入vuex-persist import VuexPersist from 'vuex-persist'; // 创建对象,借助浏览器缓存,存入localStorage const vuexLocal = new VuexPersist({ storage: window.localStorage // 可选存储方式 }) export default new Vuex.Store({ state: { id: 1 }, mutations: { editId(state, id) { state.id = id } }, // 引入 vuex-persist 插件 plugins: [vuexLocal.plugin] })