实现VueX数据持久化

VUEX数据持久化

因为js代码在内存中运行，在刷新时内存会被释放，所以数据也没了，但在开发的过程中，像用户信息（名字，头像，token）需要vuex中存储且需要本地存储，再例如，购物车如果需要未登录状态下也要支持，我们可以通过 vuex-persistedstate 插件来完成VUEX的数据持久化。

1.安装vuex的插件vuex-persistedstate来支持vuex的状态持久化
2. 在你的store 文件下的 index.js 中 配置 例如：

 import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'

import user from './modules/user'
import cart from './modules/cart'

export default createStore({
  modules: {
    user,
    cart
  },
  // plugins 
  plugins: [
    createPersistedstate({
      //key是存储数据的键名
      key: 'erabbit-client-pc-store',
      //paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如`user.token
      paths: ['user', 'cart']
    })
  ]
})

存储在localStorage中,修改state中的数据即可触发同步机制，可以看到本地存储数据的的变化