Vue 进阶系列丨vuex持久化

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

---

2013年7月28日，尤雨溪第一次在 GItHub 上为 Vue.js 提交代码；2015年10月26日，Vue.js 1.0.0版本发布；2016年10月1日，Vue.js 2.0发布。

最早的 Vue.js 只做视图层，没有路由， 没有状态管理，也没有官方的构建工具，只有一个库，放到网页里就可以直接用了。

后来，Vue.js 慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（Vue-cli）等。此时，Vue.js 的定位是：The Progressive Framework。翻译成中文，就是渐进式框架。

Vue.js2.0 引入了很多特性，比如虚拟 DOM，支持 JSX 和 TypeScript，支持流式服务端渲染，提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue 已是一名前端工程师必备的技能，现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧！

---

为什么要做vuex持久化？

vuex：基于内存的方案  存取速度特别快  基于vuex模式使用特别方便 ，缺点就是刷新就会丢失

localStorage：基于磁盘的方案  存取速度稍慢  操作起来没有vuex方便，优势是刷新不丢失 

使用 vuex-persistedstate 插件可以帮助我们自动把vuex的数据同步到本地进行持久化缓存，利用 vuex 搭配 localStorage 存取速度快和vue配合灵活，且刷新不丢失

持久化原理：修改state中的数据即可触发同步机制，可以看到本地存储数据的的变化，每次修改只要数据变了就会自动把 vuex 同步到 localStorage；刷新的时候会自动从localStorage取然后同步到vuex

---

如何使用 vuex-persistedstate 插件

1. 安装 vuex-persistedstate 包
   

2. // 在 store/index.js 文件中
   // createStore一个方法 用来生成store实例对象
   // vuex中的配置项完全保持一致  state getters mutations actions
   import { createStore } from 'vuex'
   import user from './modules/user'
   import cart from './modules/cart'
   import createPersistedstate from 'vuex-persistedstate'
   export default createStore({
     strict: true, // 开启严格模式
     modules: {
       // 组合模块
       user,
       cart
     },
     plugins: [
       // 插件配置 支持多个插件的
       createPersistedstate({
         key: 'message', // 这个key会作为标识存入本地
         paths: ['user', 'cart'] // 哪个模块进行持久化缓存 内部所有的数据都会进行持久换缓存
       })
     ]
   })

3.默认是存储在 localStorage 中，可以对存储的方法进行自定义

// 存到 sessionStorage
createPersistedstate({
     storage: window.sessionStorage,
      key: 'message', // 这个key会作为标识存入本地
      paths: ['user', 'cart'] // 哪个模块进行持久化缓存 内部所有的数据都会进行持久换缓存
 })
    
// 存到 cookie
// 需要下包 js-cookie
// 在main.js 中引入 import * as Cookies from 'js-cookie'
createPersistedstate({
     storage: {
      getItem: key => Cookies.get(key),
      setItem: (key, value) => Cookies.set(key, value, {expires:7}),
      removeItem: key => Cookies.remove(key)
     },
      key: 'message', // 这个key会作为标识存入本地
      paths: ['user', 'cart'] // 哪个模块进行持久化缓存 内部所有的数据都会进行持久换缓存
})

---

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

王海霞

HFun 前端攻城媛

往期精彩：

• Vue 进阶系列丨Object 的变化侦测

• Vue 进阶系列丨Array 的变化侦测

• Vue 进阶系列丨虚拟DOM和VNode

• Vue 进阶系列丨Patch 和模板编译

• Vue 进阶系列丨事件相关的实例方法

• Vue 进阶系列丨生命周期相关的实例方法

• Vue 进阶系列丨生命周期

• Vue 进阶系列丨自定义指令

• Vue 进阶系列丨最佳实践

• Vue 进阶系列丨Mixin 混入

• Vue 进阶系列丨权限控制 addRoute()