使用vuex-persistedstate防止vuex数据刷新丢失

5,981 阅读1分钟

安装

npm install vuex-persistedstate

用法

根据目录结构在store下的index.js文件下引入

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  modules: {
    user
  },
  strict: debug,
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 1 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

配置

vuex-persistedstate默认持久化所有state,指定需要持久化的state移步官网API:vuex-persistedstate

plugins提供三种方式存储 (localStorage、sessionStorage、cookie) 默认localStorage

可根据个人喜好配置plugins

localStorage

export default new Vuex.Store({
  modules: {
    user
  },
  strict: debug,
  plugins: [
    createPersistedState() // 默认localstorage
  ]
})

sessionStorage

export default new Vuex.Store({
  modules: {
    user
  },
  strict: debug,
  plugins: [
    createPersistedState({
        storage: window.sessionStorage
    })
  ]
})

cookie

安装

npm install js-cookie

引入

import * as Cookies from 'js-cookie'

具体写法

export default new Vuex.Store({
  modules: {
    user
  },
  strict: debug,
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 1 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

附上完整代码

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  modules: {
    user
  },
  strict: debug,
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 1 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

接下来就可以去页面中肆无忌惮的刷新啦

有没有大佬知道cookie方式为什么要这样写?

storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 1 }),
        removeItem: key => Cookies.remove(key)
      }

AIGC爱好者 专注AI提效 共同学习交流