vue3

vuex数据持久化

# 1. localStorage 存储

const state = {
  authInfo: JSON.parse(sessionStorage.getItem('COMPANY_AUTH_INFO')) || {}
}

const getters = {
  authInfo: state => state.authInfo
}
const mutations = {
  SET_COMPANY_AUTH_INFO(state, data) {
    state.authInfo = data
    sessionStorage.setItem('COMPANY_AUTH_INFO', JSON.stringify(data))
  }
}

//actions 模块里无需使用 sessionStorage

export default {
  namespaced: true,
  state,
  getters,
  mutations
  //actions,
}

# 2. 第二种方法是 vuex-along (不常用)

// npm install vuex-along --save
import Vue from 'vue'
import Vuex from 'vuex'
import indexOne from './modules/indexOne'
import VueXAlong from 'vuex-along'

Vue.use(Vuex)
const store = new Vuex.Store({
  strict: false,
  modules: {
    indexOne
  },

  plugins: [
    VueXAlong({
      name: 'along', //存放在localStroage或者sessionStroage 中的名字
      local: false, //是否存放在local中  false 不存放 如果存放按照下面session的配置配
      session: { list: [], isFilter: true }
      //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
    })
  ]
})

export default store

# 3. 第三种方法是 vuex-persistedstate

// npm install --save vuex-persistedstate

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },

  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
        return {
          // 只储存state中的user
          user: val.base
        }
      }
    })
  ]
})

export default store

# 4. 第四种方法是 vuex-persist

// npm install --save vuex-persist
// or
// yarn add vuex-persist

import Vue from 'vue'
import Vuex from 'vuex'
import indexOne from './modules/indexOne'
import VuexPersistence from 'vuex-persist'
Vue.use(Vuex)

const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

const store = new Vuex.Store({
  strict: false,
  modules: {
    indexOne
  },
  plugins: [vuexLocal.plugin]
})
export default store
上次更新: