vue项目切换页面缓存搜索条件

最近碰到一个项目难点，用户在列表搜索待审批的数据，点击审批（单独页面），审批完成后回到列表页，把待审批搜索条件给重置了，又需要重新搜
解决：技术点vue-router，vuex
1.将父类公用的router-view包裹上keep-alive标签
keep-alive是vue缓存组件，参数有
include：包含文件
等等参数

                  <keep-alive  :include="cachedViews">
                    <router-view  :key="key" ></router-view>
                    </keep-alive>
            computed: {
            cachedViews() {
            return ['StaticPage','Dashboard','project','cron'] 
            key() {
            return this.$route.fullPath
            }
        },

如此就打开多个页面都能缓存页面条件啦
是不是很简单。。

还没完，但是关闭页面之后再次打开上次的页面发现搜索条件还在呀，这不符合逻辑，得改
需要使用vuex了
package.json 需要扩展 “vuex”: “^3.1.0”
main.js引入import store from ‘./store’
new Vue({
store,
…
}).$mount(’#app’);
增加store目录，新建index.js文件
定义 页面改变状态字段

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //这里放全局参数
    pageChangeStatus: false,
  },
  mutations: {
    //这里是set方法
    SET_PAGECHANGESTATUS: (state, status) => {
      state.pageChangeStatus = status
    }
  },

  getters: {//这里是get方法  
    pageChangeStatus: state => state.pageChangeStatus
  },

  actions: {
    setPageChangeStatus({ commit }, status = false) {
      commit('SET_PAGECHANGESTATUS', status)
    }
  },

  modules: {
    //这里是我自己理解的是为了给全局变量分组，所以需要写提前声明其他store文件，然后引入这里
  }
});

在需要清理缓存的页面增加监听url改变，重置搜索条件方法pgs

    computed: {
      pgs() {
        return this.$store.getters.pageChangeStatus
      }
    },
    watch: {
      pgs(nv) {
        if (nv && this.__fullPath && nv === this.__fullPath) {
         this.resetForm()
         this.$store.dispatch('setPageChangeStatus')
        }
      }
    },
        activated() {
        this.__fullPath = this.$route.fullPath
    },

我是根据用户点击x 关闭窗口

就重新设置store参数pageChangeStatus值
this.$store.dispatch(‘setPageChangeStatus’, delItem.path)

这样页面监听pgs就改变了执行了resetForm()重置方法