Vuex - 持久化

目标:把vuex的自动化缓存 存入localStorage 和cookie.

一般来说,把数据存储到localStorage即可,我们两种目标都来实现一下,我们会用到两个插件,这样方便用户操作,也有利于初学者学习.

任务目标: 使用插件帮助我们自动把vuex的数据同步到本地进行持久化缓存.

解决方案：

1.使用vue-cli的style-resoures-loader插件来完成自动注入到每个vue组件中style标签中,安装命令

npm i vuex-persistedstate.

实现步骤 :

a.安装vuex-persistedstate 插件

b.vuex中准备user模块 (咱们一会做测试使用)

c.将插件配置到vuex的plugins选项中，配置user模块进行状态持久化

d.修改state数据就会触发自动同步机制，修改一下数据检测是否同步成功

安装具体过程不在此展示!

具体代码展示:

 在 src/store/index.js 中导入 user 模块

 

刚才这一步是做测试用的,看看是否存储到localStorage

 mutations: {

    setUser (state, payload) {

      state.profile.id = '10086'

    }

  },

可以看出,已经缓存成功到 localStorage中.

二.缓存到cookie中

引入js-cookie库,安装命令 npm i js-cookie.(安装过程不展示)

import * as Cookies from 'js-cookie'// 引入js-cookie库

添加下列箭头指示代码:

 

 看下效果:

可以看出,cookie中也成功缓存,目的达成,主要是运用两个插件完成,比较简单方便使用.