Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件详解

阮班国

第一部分：手动存储

vuex的 store 中的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，vuex里面的数据就会被重新赋值，这样就会出现页面刷新vuex中的数据丢失的问题。
如何解决浏览器刷新数据丢失问题呢？
方法一：全局监听
页面刷新的时候将 store 里 state 的值存到 sessionStorage 中，然后从sessionStorage 中获取，再赋值给 store ，并移除 sessionStorage 中的数据。
在 app.vue 中添加以下代码：

1. //在根组件.vue中添加如下代码 app.vue
   
2. created () {
   
3.   window.addEventListener('beforeunload', () => {
   
4.     sessionStorage.setItem('list', JSON.stringify(this.$store.state))
   
5.    })
   
6.   try {
   
7.     sessionStorage.getItem('list') && this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('list'))))
   
8.    } catch (err) {
   
9.      console.log(err)
   
10.    }
    
11.    sessionStorage.removeItem('list')
    
12.   }

复制代码

第二部分：利用vuex-persistedstate插件


vue2写法

步骤：
第一步：运行如下的命令，安装持久化存储 vuex 中数据的第三方包：

1. npm i vuex-persistedstate

复制代码

第二步：在

1. src/store/index.js

复制代码

模块中，导入并配置

1. vuex-persistedstate

复制代码

包：
默认存储到localStorage

1. //vuex：store.js文件内容如下
   
2. import Vue from 'vue'
   
3. import Vuex from 'vuex'
   
4. // 1. 导入包
   
5. import createPersistedState from 'vuex-persistedstate'
   
6. 
   
7. Vue.use(Vuex)
   
8. 
   
9. export default new Vuex.Store({
   
10.   // 2. 配置为 vuex 的插件
    
11.   plugins: [createPersistedState()],
    
12.   state: {
    
13.     token: ''
    
14.     ...
    
15.   },
    
16. })

复制代码

想要存储到sessionStorage，配置如下：

1. import createPersistedState from "vuex-persistedstate"
   
2. const store = new Vuex.Store({
   
3.   // ...
   
4.   plugins: [createPersistedState({
   
5.       storage: window.sessionStorage
   
6.   })]
   
7. })

复制代码

vue3写法

1）首先：我们需要安装一个vuex的插件

1. vuex-persistedstate

复制代码

来支持vuex的状态持久化。

1. npm i vuex-persistedstate

复制代码

2）然后：在

1. src/store

复制代码

文件夹下新建

1. modules

复制代码

文件，在

1. modules

复制代码

下新建

1. user.js

复制代码

和

1. cart.js

复制代码

1. src/store/modules/user.js

复制代码

3）继续：在

1. src/store/index.js

复制代码

中导入 user cart 模块。

1. import { createStore } from 'vuex'
   
2. 
   
3. import user from './modules/user'
   
4. import cart from './modules/cart'
   
5. import cart from './modules/category'
   
6. 
   
7. export default createStore({
   
8.   modules: {
   
9.     user,
   
10.     cart,
    
11.     category
    
12.   }
    
13. })

复制代码

4）最后：使用vuex-persistedstate插件来进行持久化

1. import { createStore } from 'vuex'
   
2. +import createPersistedstate from 'vuex-persistedstate'
   
3. 
   
4. import user from './modules/user'
   
5. import cart from './modules/cart'
   
6. import cart from './modules/category'
   
7. 
   
8. export default createStore({
   
9.   modules: {
   
10.     user,
    
11.     cart,
    
12.     category
    
13.   },
    
14. +  plugins: [
    
15. +    createPersistedstate({
    
16. +      key: 'erabbit-client-pc-store',
    
17. +      paths: ['user', 'cart'] //需要持久化的modules
    
18. +    })
    
19. +  ]
    
20. })

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/326776imv.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！