乘风原创程序

  • vuex中数据持久化插件vuex-persistedstate使用详解
  • 2022/3/30 17:04:37
  • 数据持久化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 }
      }

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