我要评论第一部分：手动存储
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-persistedstate插件
vue2写法
步骤：
第一步：运行如下的命令，安装持久化存储 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
})]
})vue3写法
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
+ })
+ ]
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论