vuex的 store 中的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex里面的数据就会被重新赋值,这样就会出现页面刷新vuex中的数据丢失的问题。
如何解决浏览器刷新数据丢失问题呢?
方法一:全局监听
页面刷新的时候将 store 里 state 的值存到 sessionStorage 中,然后从sessionStorage 中获取,再赋值给 store ,并移除 sessionStorage 中的数据。
在 app.vue 中添加以下代码:
//在根组件.vue中添加如下代码 app.vue created () { window.addEventListener('beforeunload', () => { sessionStorage.setItem('list', JSON.stringify(this.$store.state)) }) try { sessionStorage.getItem('list') && this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('list')))) } catch (err) { console.log(err) } sessionStorage.removeItem('list') }
步骤:
第一步:运行如下的命令,安装持久化存储 vuex 中数据的第三方包:
npm i vuex-persistedstate
第二步:在 src/store/index.js
模块中,导入并配置 vuex-persistedstate
包:
默认存储到localStorage
//vuex:store.js文件内容如下 import Vue from 'vue' import Vuex from 'vuex' // 1. 导入包 import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) export default new Vuex.Store({ // 2. 配置为 vuex 的插件 plugins: [createPersistedState()], state: { token: '' ... }, })
想要存储到sessionStorage,配置如下:
import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage })] })
1)首先:我们需要安装一个vuex的插件vuex-persistedstate
来支持vuex的状态持久化。
npm i vuex-persistedstate
2)然后:在src/store
文件夹下新建 modules
文件,在 modules
下新建 user.js
和 cart.js
src/store/modules/user.js
3)继续:在 src/store/index.js
中导入 user cart 模块。
import { createStore } from 'vuex' import user from './modules/user' import cart from './modules/cart' import cart from './modules/category' export default createStore({ modules: { user, cart, category } })
4)最后:使用vuex-persistedstate插件来进行持久化
import { createStore } from 'vuex' +import createPersistedstate from 'vuex-persistedstate' import user from './modules/user' import cart from './modules/cart' import cart from './modules/category' export default createStore({ modules: { user, cart, category }, + plugins: [ + createPersistedstate({ + key: 'erabbit-client-pc-store', + paths: ['user', 'cart'] //需要持久化的modules + }) + ] })
以上为个人经验,希望对您有所帮助。