黑马程序员技术交流社区

标题: 【上海校区】Vuex持久化插件-解决刷新数据消失的问题 [打印本页]

---

作者: 不二晨    时间: 2018-8-3 10:33
标题: 【上海校区】Vuex持久化插件-解决刷新数据消失的问题
1.手动利用HTML5的本地存储方法

• vuex的state在localStorage或sessionStorage或其它存储方式中取值
• 在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。
  

这样state就会和存储一起存在并且与vuex同步
问题

• 最直观的就是，手动写比较麻烦。
  

2.利用vuex-persistedstate插件插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法
使用方法

• 安装
  

npm install vuex-persistedstate  --save复制代码

• 引入及配置
  在store下的index.js中
  
  

import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({  // ...  plugins: [createPersistedState()]})复制代码默认存储到localStorage
想要存储到sessionStorage，配置如下import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({  // ...  plugins: [createPersistedState({      storage: window.sessionStorage  })]})复制代码想使用cookie同理默认持久化所有state
指定需要持久化的state,配置如下import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({  // ...  plugins: [createPersistedState({      storage: window.sessionStorage,      reducer(val) {              return {              // 只储存state中的assessmentData              assessmentData: val.assessmentData            }         }  })]复制代码vuex引用多个插件的写法譬如：vuex提示的插件和持久化的插件一起使用，配置如下
import createPersistedState from "vuex-persistedstate"import createLogger from 'vuex/dist/logger'// 判断环境 vuex提示生产环境中不使用const debug = process.env.NODE_ENV !== 'production'const createPersisted = createPersistedState({  storage: window.sessionStorage})export default new Vuex.Store({ // ...  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]})复制代码plugins要是一个一维数组不然会解析错误


作者：hollyDysania
链接：https://juejin.im/post/5b62999fe51d4519610e336e

---

作者: 不二晨    时间: 2018-8-16 17:25
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2