vue - vuex实现持久化存储

Forever_Hopeful2023-09-25 0:03

vuex持久化存储

vuex默认是刷新就会将厂库数据重置的，那么我们利用本地存储实现vuex本地持久化存储？
代码如下：

封装本地存储的方法：

js 复制代码

// 个人信息持久化存储封装

// 约定一个 通用 的键名（本地存储键名）
const INFO_KEY = 'hm_shoppin_info'

// 1、获取信息
export const getInfo = () => {
  // 本地没有值，返回空
  const defaultObj = { token: '', userId: '' }
  const result = localStorage.getItem(INFO_KEY)
  // 本地有值，则取出来返回，没有值，则直接返回一个空对象
  return result ? JSON.parse(result) : defaultObj
}
// 2、设置信息
export const setInfo = (obj) => {
  // 设置信息存进去，需要转为字符串
  localStorage.setItem(INFO_KEY, JSON.stringify(obj))
}
// 3、移除信息
export const removeInfo = () => {
  localStorage.removeItem(INFO_KEY)
}

在vuex仓库中使用封装好的模块方法

js 复制代码

export default {
  // 开启命名空间
  namespaced: true,
  // 将state： {}  写成 函数的形式
  state () {
    return {
      // 个人信息权证
      userInfo: getInfo() // 从本地获取，持久化vuex中的数据
    }
  },
  mutations: {
    // 修改仓库中userInfo 数据
    setuserInfo (state, obj) {
      state.userInfo = obj
      // 上面将用户的权证信息，存到vux中，同时我们下面也调用封装好的存储模块函数，存到本地
      setInfo(obj) // utils/storage.js文件中封装好的
    }
  },

注意：在我们组件中，记得调用我们的mutations中的函数，传递我们用户需要存储的值，存到我们的vuex中的同时，利用我们封装好的模块方法存入一份到本地，从而实现vuex持久化存储。