vuex不能实现持久化缓存，只要刷新页面就会重置vuex数据，所以使用vuex-persistedstate实现持久化缓存
版本：
"vue": "2.6.10"
"vuex": "3.1.0"
"vuex-persistedstate": "^4.1.0"
1、按照插件
npm i vuex-persistedstate
2、引入插件
// 在store/index.js
// 当前vuex使用模块化开发
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters,
/** vuex持久化存储插件配置 */
plugins: [createPersistedState({
reducer(val) {
return {
/** 只储存state中的productList字段 */
product: {
// val表示整个vuex数据外层
// product表示当前vuex模块
// productList表示当前vuex模块的state数据
productList: val.product.productList
}
}
}
})]
})
3、缓存模块js
// store/modules/product.js
const state = {
productList: []
}
const mutations = {
}
const actions = {
}
export default {
namespaced: true,
state,
mutations,
actions
}
image.png
