vue——列表返回优化（返回列表保持搜索条件）

---

主题思路

1.把列表查询的条件放在vuex里，进行存储。
2.当进入对应的列表时，判断vuex是否存在查询条件。并进行赋值。
3.当点击左侧菜单栏，判断是否存在当前页，如果不存在就清除当前页在vuex存入的查询条件。

---

一、在vuex里存入查询条件。根据key值判断进行查询条件的存入与删除

代码如下（示例）：

const state = {
    routData: {},
}
const mutations = {
    //添加
    ADD_QUERY: (state, data) => {
        Object.assign(state.routData, data)
    },
    //删除
    SET_QUERY: (state, key) => {
        delete state.routData[key]
    },
}
const actions = {
    querying({
        commit,
        state
    }, data) {
        var key = Object.keys(data)[0]
        if (state.routData[key]) {
            commit('SET_QUERY', key)
            commit('ADD_QUERY', data)
        } else {
            commit('ADD_QUERY', data)
        }
    },
    //删除
    empty({ commit, state }, key) {
        if (state.routData[key]) {
            commit('SET_QUERY', key)
        }
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

二、在列表页面的使用

1.存入查询条件

代码如下（示例）：

 //存储查询状态
 setquery() {
   var path = this.$route.path;
   var data = {};
   data[path] = {
     queryParams: this.queryParams
   };
   this.$store.dispatch("routing/querying", data);
 },

我这里是把路由path作为存入的key值，调用之前在vuex定义的querying方法进行存入。

2.获取查询条件

代码如下（示例）：

 //获取存储查询
 let path = this.$route.path;
 if (this.$store.getters.routData[path]) {
   Object.assign(
     this.queryParams,
     this.$store.getters.routData[path].queryParams
   );
 }

判断vuex存储中是否存在当前key值，如果存在就进行赋值操作

三、在菜单栏点击事件中进行判断页面是否存在，并进行vuex删除对应key值

代码如下（示例）：

 gotopath(path) {
   var pathList = [];
   this.$store.getters.visitedViews.forEach(v => {
     pathList.push(v.path);
   });
   if (pathList.indexOf(path) == -1) {
     this.$store.dispatch("routing/empty", path);
   }
 }

this.$store.getters.visitedViews为vuex中存储的面包屑，进行判断是否存在。如果不存在就调用empty删除方法。