vuex中数据持久化插件vuex-persistedstate使用详解

 更新时间:2022年03月30日 10:08:18   作者:JackieDYH  
这篇文章主要介绍了vuex中数据持久化插件vuex-persistedstate使用详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

数据持久化vuex-persistedstate使用

vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希望如此。例如全局相关的,如登录状态、token、以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验。

安装起步

npm i vuex-persistedstate --save

目前的环境版本:

"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.4.0",
"vuex-persistedstate": "^3.0.1",

vuex已经升级到了3,看了release note没有发现太过分的升级,预计不会出现不兼容的情况,有感兴趣的小伙伴可以升级体验一下。

配置使用

在vuex初始化时候,作为组件引入。

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

自定义存储方式

vuex-persistedstate默认使用localStorage来固化数据,一些特殊情况要如何应对呢?(如:safari的无痕浏览模式)

需要使用sessionStorage的情况

plugins: [
    persistedState({ storage: window.sessionStorage })
]

使用cookie的情况

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
  // ...
  plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

想使用cookie同理

默认持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只储存state中的assessmentData
          assessmentData: val.assessmentData
        }
     }
  })]

vuex引用多个插件的写法

譬如:vuex提示的插件和持久化的插件一起使用,配置如下

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins要是一个一维数组不然会解析错误

使用vuex-persistedstate插件遇到的问题

这是一个做持久化的插件:vuex-persistedstate

 我在做项目时,遇到一个问题,就是做下面这个功能,渲染数据的时候,因为这个数据好多个地方使用,所以呢,把它存到了vuex里面。vuex 是将数据存到了浏览器的内存中,刷新就没了

这行代码是写在vuex里面的,就是说,我直接从本地去拿数据

list: JSON.parse(window.localStorage.getItem('abc')).category.list || []

直接看下代码: 我一开始是这样想的,既然我vuex中有数据了,不用计算属性行不行,直接渲染,确实可以渲染,但是品牌这一项咋渲染呢,push行不通啊,那就只能把结构写死,但是页面效果就不对了,所以这个地方用计算属性,第一,动态的取到前两项,第二,可以动态的添加新的 li 结构。

计算属性使用的场景:有数据啦,但不是我想要的格式,要加工加工

 setup () {
    const brand = reactive({
      id: 'brand',
      name: '品牌',
      children: [{ id: 'brand-children', name: '品牌推荐' }]
    })
    const store = useStore()
    const cateList = computed(() => {
      const list = store.state.category.list.map(item => {
        return {
          id: item.id,
          name: item.name,
          children: item.children && item.children.slice(0, 2)
        }
      })
      list.push(brand)
      return list
    })
    return { cateList }
  }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue 如何将二维数组转化为一维数组

    vue 如何将二维数组转化为一维数组

    这篇文章主要介绍了vue 如何将二维数组转化为一维数组,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.js仿Metronic高级表格(二)数据渲染

    Vue.js仿Metronic高级表格(二)数据渲染

    这篇文章主要为大家详细介绍了Vue.js仿Metronic高级表格的数据渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • uniapp+vue3路由跳转传参的实现

    uniapp+vue3路由跳转传参的实现

    本文主要介绍了uniapp+vue3路由跳转传参的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • vue3.0父传给子的值不随父组件改变而改变问题及解决

    vue3.0父传给子的值不随父组件改变而改变问题及解决

    这篇文章主要介绍了vue3.0父传给子的值不随父组件改变而改变问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vuex localStorage的具体使用

    Vuex localStorage的具体使用

    本文主要介绍了Vuex localStorage的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue全局引入scss(mixin)

    vue全局引入scss(mixin)

    本文主要介绍了 vue全局引入scss,我们在写VUE的时候,会使用scss,也会做一些通用样式,方便使用,在写好的通用样式的时候,每次都要单文件导入,刚开始写的时候,感觉还好,后面工程量大了后,就显得麻烦,那么本文就全局导入scss样式,下面来看详细内容,需要的朋友可以参考一下
    2021-11-11
  • vue设置默认首页的操作

    vue设置默认首页的操作

    这篇文章主要介绍了vue设置默认首页的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue组件化中slot的基本使用方法

    vue组件化中slot的基本使用方法

    这篇文章主要给大家介绍了关于vue组件化中slot的基本使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • Vue3之列表动画和状态动画示例详解

    Vue3之列表动画和状态动画示例详解

    这篇文章主要为大家介绍了Vue3之列表动画和状态动画示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 超实用vue中组件间通信的6种方式(最新推荐)

    超实用vue中组件间通信的6种方式(最新推荐)

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要介绍了vue中组件间通信的6种方式,需要的朋友可以参考下
    2022-11-11

最新评论