Vuex持久化

最新推荐文章于 2024-01-10 17:19:24 发布

叫我余先生啦丶

最新推荐文章于 2024-01-10 17:19:24 发布

阅读量131

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_57334089/article/details/121213432

版权

本文介绍了如何使用vuex-persistedstate插件实现Vuex中数据的自动持久化存储，详细步骤包括安装插件、定义要存储的Vuex状态、在store的index中导入并配置，以及说明数据默认存储在localStorage中的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用插件让在vuex中管理的状态数据自动同时存储在本地免去自己存储的环节

1.安装vuex-persistedstate插件

npm i vuex-persistedstate

2.vuex中准备要存储的数据

例如:

在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js

// 用户状态
export default {
  namespaced: true,
  state: () => {
    return {
      profile: {
        id: '',
        nickname: '',
        avatar: '',
        token: '',
        mobile: ''
      }
    }
  }
}

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

3.在store下的index中导入

import { createStore } from 'vuex'
 
import user from './modules/user'
import cart from './modules/cart'
 
export default createStore({
  modules: {
    user,
    cart
  }
})

4.使用vuex-persistedstate插件来进行持久化

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: [
    createPersistedstate({
      key: 'erabbit-client-pc-store',
      paths: ['user', 'cart']
    })
  ]
})

说明

默认是存储在localStorage中
key是存储数据的键名
paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token
修改state后触发才可以看到本地存储数据的的变化

手动保存token和vuex中的数据

// 封装本地存储,以后改的话,直接在这边改
// 取值
export const getStorage = key => localStorage.getItem(key)
// 赋值
export const setStorage = (key, value) => localStorage.setItem(key, value)
// 清空
export const clearStorage = () => localStorage.clear()
// 移除
export const removeStorage = key => localStorage.removeItem(key)
 
export default {
  getStorage,
  setStorage,
  clearStorage,
  removeStorage
}


// vuex的变量
import { setStorage, getStorage } from '../utils/storage'
export default {
  // 开启命名空间
  namespaced: true,
  state () {
    return {
      token: getStorage('token'),
      refresh_token: getStorage('refresh_token'),
      user: {}, // 用户基本资料
      userProfile: {} // 用户的简介
    }
  },
  mutations: {
    setRefreshToken (state, refreshToken) {
      state.refresh_token = refreshToken
      // 给vuex存token值的时候,随便给本地存一份
      setStorage('refresh_token', refreshToken)
    },
    setToken (state, token) {
      state.token = token
      // 给vuex存token值的时候,随便给本地存一份
      setStorage('token', token)
    },
    setUser (state, payload) {
      state.user = payload
    },
    setuserProfile (state, payload) {
      state.userProfile = payload
    },
    clearUser (state) {
      state.token = ''
      state.refresh_token = ''
      state.user = {}
      state.userProfile = {}
    }
  }
}