vuex的信息都是存在内存里，刷新页面的时候会丢失，每次都要重新请求ajax又很低效，所以我们需要有个方法来缓存起来
思路很简单，就是使用localStorage来做中转，获取数据时候在localStorage存一份副本，刷新页面时候再解析出来
假设我们在vuex里有这样一个模块
import $http from '@/api/index'
const state = {
someData: null
}
const getters = {
someData: state => state.someData,
}
const mutations = {
set_someData(state, payload) {
state.someData = payload
},
}
const actions = {
get_someData({
commit
}, payload) {
return new Promise((resolve, reject) => {
$http.get("/someData", payload).then(res => {
localStorage.someData = JSON.stringify(res)
commit('set_someData', res)
resolve(res)
}).catch(err => [
reject(err)
])
})
},
}
export default {
state,
getters,
actions,
mutations,
}
其中get_someData用来发起一个ajax请求，并且把数据同时存在localStorage和state里
这里需要给action和mutation规范一下命名方式，便于集中管理
action以get_做前缀，mutation以set_做前缀
然后在vue项目的入口App.vue里定义一个公共的缓存方法
cache(val) {
if (!this.$store.getters[val] && localStorage[val]) {
this.$store.commit(
`set_${val}`,
JSON.parse(localStorage[val])
);
} else if (!localStorage[val]) {
this.$store.dispatch(`get_${val}`);
}
}
如果我们要缓存someData的数据，让页面刷新时候不再次发起ajax请求，只需要在App.vue的mounted里加入this.cache('someData');即可
