实现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中的数据即可触发同步机制,可以看到本地存储数据的的变化


版权声明:本文为qq_66436524原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。