vue使用vuex-persistedstate和window.localStorage实现全局缓存vuex中的user模块和局部缓存某个字段

1、首先安装vuex-persistedstate

npm i vuex-persistedstate

2.1、store中的index.js模块中的内容如下：

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

import user from './user'

export default createStore({
  state: {
    name: 'jjw'
  },
  // getters: {
  // },
  mutations: {
    changeName (state, data) {
      state.name = data
    }
  },
  // actions: {
  // },
  modules: {
    // User,
    user
  },
  plugins: [
    createPersistedstate({
      key: 'myUser',
      paths: ['user'] // 将user整个模块中的state都缓存下来
    })
  ]
})

2.2 和index.js同级新建user.js，其中的内容如下：

export default {
  namespaced: true,
  state: () => {
    return {
      // 用户信息
      profile: {
        id: '',
        nickname: ''
      }
    }
  },
  getters: {
    // 有效商品列表
    nick_name (state) {
      const len = state.profile.nickname?.length
      // 有效商品：库存大于0  stock  商品有效标识为  true  isEffective
      return state.profile.nickname?.substring(0, 2) + '*****' + state.profile.nickname?.substring(len - 4, len)
    },
    // 获取其他模块中的 下边这个getters就相当于最上边这个getters
    get_nick_name (state, getters) {
      const len = state.profile.nickname?.length
      return getters.nick_name?.substring(0, 2) + '=====' + state.profile.nickname?.substring(len - 4, len)
    }
  },
  mutations: {
    // 修改用户信息，payload就是用户信息对象
    setUser (state, payload) {
      state.profile = payload
    }
  }
  // actions: {
  //   // 合并购物车  在这里边也可以使用async await
  //   async mergeCart (ctx) {
  //     // 准备合并的参数
  //     const cartList = ctx.state.list.map(goods => {
  //       return {
  //         skuId: goods.skuId,
  //         selected: goods.selected,
  //         count: goods.count
  //       }
  //     })
  //     await mergeCart(cartList)
  //     // 合并成功，清空本地购物车
  //     ctx.commit('setCart', [])
  //   },
  //   // 批量删除
  //   batchDeleteCart (ctx, isClear) {
  //     return new Promise((resolve, reject) => {
  //       if (ctx.rootState.user.profile.token) {
  //         // 已登录
  //         const ids = ctx.getters[isClear ? 'invalidList' : 'selectedList'].map(item => item.skuId)
  //         deleteCart(ids).then(() => {
  //           return findCart()
  //         }).then(data => {
  //           ctx.commit('setCart', data.result)
  //           resolve()
  //         })
  //       } else {
  //         // 未登录
  //         // 找出选中的商品列表，遍历调用删除的mutations
  //         // isClear 未 true  删除失效商品列表，否则事选中的商品列表
  //         ctx.getters[isClear ? 'invalidList' : 'selectedList'].forEach(item => {
  //           ctx.commit('deleteCart', item.skuId)
  //         })
  //         resolve()
  //       }
  //     })
  //   },
  // }
}

3、main.js中导入并挂载

import store from './store'
.use(store)

4、app.vue中的内容如下：

<template>
  <div>{{$store.state.name}}</div>
  <button class="my-button" @click="changeIndexName">点击修index中的名字</button>
  <div v-if="$store.getters['user/nick_name']" class="my-test">{{$store.getters['user/nick_name']}}</div>
  <div v-if="defaultName" class="my-test">{{defaultName}}</div>
  <div>{{$store.state['user'].profile}}</div>
  <div>{{$store.state.user.profile}}</div>
  <button class="add-user" @click="addUser">添加用户名</button>
  <button class="my-button" @click="changeName">点击修改名字</button>
  <button class="my-button" @click="$store.commit('user/setUser',{id:'1', nickname:'jzw'})">点击修改名字</button>
  <button class="del-user" @click="delUser">删除用户</button>
  <button class="del-user" @click="localCache">局部缓存</button>
  <button class="del-user" @click="getCache">获取局部缓存</button>
  <div>{{age}}</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const defaultName = ref('')
const changeName = () => {
  console.log(store.getters['user/get_nick_name'])
  // defaultName.value = store.getters.user.get_nick_name
  defaultName.value = store.getters['user/get_nick_name']
}

const changeIndexName = () => {
  store.commit('changeName', 'jinjiwei')
}
const addUser = () => {
  // const store = useStore()
  const profile = reactive({
    id: '01',
    nickname: '我开心我快乐咋滴吧'
  })
  // store.commit('user/setUser', { id, account, avatar, mobile, nickname, token })
  store.commit('user/setUser', profile)
  // store.commit('setUser', profile)
}
const delUser = () => {
  store.commit('user/setUser', {})
  // store.commit('setUser', {})
}

const age = ref(0)
// 用来局部设置localStorage
const localCache = () => {
  window.localStorage.setItem('age', 19)
}
const getCache = () => {
  age.value = window.localStorage.getItem('age')
}

</script>

<style lang="less">
.my-test{
  height: 50px;
  font-size: 30px;
}

</style>

结果如下：