Vue3系列--5.Vuex实现数据持久化

1,964 阅读2分钟

在项目中我们在很多地方都会用到数据的持久化,比如存储token的时候,或者电商平台里面我们的购物车里要保持之前加入购物车的商品。那么就让我们来看一下Vue3中是如何实现他的吧


1)首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。

npm i vuex-persistedstate

2)然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.jscart.js
(这里js文件名字根据自己项目选择合适的名字)

src/store/modules/user.js

// 用户模块
export default {
  namespaced: true,
  state () {
    return {
      // 用户信息
      profile: {
        id: '',
        avatar: '',
        nickname: '',
        account: '',
        mobile: '',
        token: ''
      }
    }
  },
  mutations: {
    // 修改用户信息,payload就是用户信息对象
    setUser (state, payload) {
      state.profile = payload
    }
  }
}

src/store/modules/cart.js

// 购物车状态
export default {
  namespaced: true,
  state: () => {
    return {
      list: []
    }
  }
}

3)继续:在 src/store/index.js 中导入 user cart cate模块。

import { createStore } from 'vuex'

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

export default createStore({
  modules: {
    user,
    cart,
    cate
  }
})

4)最后:使用vuex-persistedstate插件来进行持久化

import { createStore } from 'vuex'
//先导入插件
import createPersistedstate from 'vuex-persistedstate'

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

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

注意:

===> 默认是存储在localStorage中

===> key是存储数据的键名

===> paths是存储state中的那些数据,如果是模块下具体的数据需要加上模块名称,如user.token

===> 修改state后触发才可以看到本地存储数据的的变化。

总结:

  1. 基于第三方包实现vuex中的数据的持久化
  2. 触发持久化的条件是state发生变化