vue框架搭建之页面缓存方案

页面缓存

1. 首先定义路由的时候在meta中标记哪些页面需要默认缓存
   
2. 我们使用includes指令来缓存部分页面，需要缓存的数据保存在vuex的store中，方便后面动态操作

vuex的store配置：

// vuex的store配置
export default new Vuex.Store({
  state: {
    // 需要缓存的页面名称集合（注意：includes指令中配置的名称是组件内部name定义的名称，不是路由中配置的name）
    keepAliveComponents: []
  },
  mutations: {
    // 提供两个操作数组的mutation
    addKeepAlive(state, name) {
      let arr = state.keepAliveComponents.map(item => {
        return item;
      });
      arr.push(name);
      state.keepAliveComponents = arr;
    },
    delKeepAlive(state, name) {
      let arr = state.keepAliveComponents.filter(item => {
        return item != name;
      })
      state.keepAliveComponents = arr;
    }
  },
  actions: {
  },
  modules: {
  }
})