vue实际运用之vuex持久化详解

极客

　　这篇文章主要为大家介绍了vue运用之vuex持久化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

vuex持久化

2. vuex：刷新浏览器，vuex中的state会重新变为初始状态

复制代码

　　解决办法：

2. 使用vuex-persistedstate插件 （实际就是自动存在本地存储中）

复制代码

   

• 安装 npm i -S vuex-persistedstate   
  
• 引入及配置：在store下的index.js中
  

2. import Vue from 'vue'
3. import Vuex from 'vuex'
4. //引入
5. import persistedState from 'vuex-persistedstate'
6. Vue.use(Vuex)
7. export default new Vuex.Store({
8.   state: {
9.     num: null,
10.     name: null
11.   },
12.   mutations: {
13.     getNum(state, val) {
14.       state.num = val
15.     },
16.     getName(state, val) {
17.       state.name = val
18.     }
19.   },
20.   //配置
21.   plugins: [
22.     persistedState({
23.     //默认使用localStorage来固化数据，也可使用sessionStorage，配置一样
24.       storage: window.localStorage,
25.       reducer(val) {
26.         return {
27.         // 只储存state中的值
28.           num: val.num,
29.           name: val.name
30.         }
31.       }
32.     })
33.   ]
34. })

复制代码

　　我在Home组件中给vuex中的state中变量赋值

2. created(){
3.     this.$store.commit('getNum',3)
4.     this.$store.commit('getName','胡歌')
5.   },

复制代码

　　在H组件中引用

2. ‹template>
3.   ‹div>
4.       {{$store.state.num}}
5.       {{$store.state.name}}
6.   ‹/div>
7. ‹/template>

复制代码

　　这样刷新H组件，$store.state中的变量不会变，其实就是自动存在本地存储中

总结

　　本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

---