vuex 持久化存储方案探索

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');即可