方法1:vuex配合sessionStorage
1.當(dāng)有數(shù)據(jù)需要存儲(chǔ)到 state 內(nèi)的同時(shí)也存儲(chǔ)到本地 sessionStorage 中,這個(gè)過程寫在 mutation 內(nèi)
2.使用 getter 計(jì)算當(dāng)需要的參數(shù)不存在時(shí)從 sessionStorage 中獲取
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo: ''
},
getters:{
getUserInfo(state){
if (!state.userInfo) {
state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
}
return state.userInfo
}
},
mutations: {
saveUserInfo(state, userData) {
state.userInfo = userData;
sessionStorage.setItem('userInfo',JSON.stringify(userData));
}
}
})
export default store
方法2:使用插件 vuex-along
npm install vuex-along --save 安裝
import Vue from 'vue'
import Vuex from 'vuex'
import createVuexAlong from 'vuex-along'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo: ''
},
getters: {
getUserInfo(state) {
if (!state.userInfo) {
state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
}
return state.userInfo
}
},
mutations: {
saveUserInfo(state, userData) {
state.userInfo = userData;
sessionStorage.setItem('userInfo', JSON.stringify(userData));
}
},
plugins: [
createVuexAlong({
// 設(shè)置保存的集合名字颤绕，即存儲(chǔ)到本地的鍵名
name: "hello-vuex-along",
local: { //可以設(shè)置 local ： false --> 即不存儲(chǔ)到local中框舔，session也一樣
list: ["userInfo"],
// 過濾 userInfo晶通， 將其他的存入 localStorage
isFilter: true,// 是否開啟過濾
},
session: { //vuex-along可以配合 Module 使用扛点，不寫入isFilter選項(xiàng)時(shí) list 內(nèi)的參數(shù)為需要存儲(chǔ)的
// 保存模塊 module 中的 a1 到 sessionStorage
list: ["module.a1"],
},
}),
],
})
export default store
【↓↓有收獲請點(diǎn)個(gè)贊哦~~】
