多文件公用mixins用路由判断刷新踩的坑

公共ListMixins.js文件

watche:{

"$store.state.pageRefresh.basicRefresh": {
      deep: true, //深度监听设置为 true
      immediate: true,
      handler: function (val, oldVal) {

        // 虽然这是列表的js监听但是是在详情点的保存，然后这里监听到以后，打印的路由名是详情Edit,所以需要转换

        let routeRoute = this.$route.name.replace('Edit', "List")


        /* 
        因为这里是公用的js文件，所有基础资料列表都会触发这个方法

        打印的数据：
        routeRoute  pageParameters.basicDataListName
        partList   productCodeList
        partList   partList
        partList   employeeList
        可以看出所有基础资料列表打印的是当前的地址栏的路由，所以this.$route.name都是相同的
        但是再次之前已经保存的数据不是相同的,pageParameters里面的basicDataListName不同
        */
        console.log(routeRoute, this.pageParameters.basicDataListName);

        //  这里为什么判断不了
        console.log(val[routeRoute], oldVal[routeRoute]);//这两个相等，为什么不是新旧数据，是因为是对象引用的是地址，所以同步更新？深度监听没用吗？
        // if(val[routeRoute]> oldVal[routeRoute])//
        // 所以这里用routeRoute   和 this.pageParameters.basicDataListName做判断
        if (routeRoute === this.pageParameters.basicDataListName) {
          // 然后就只有一个页面刷新
          console.log(routeRoute);
          this.refresh()
        }
      }
    }
  }
}

pageRefresh文件vuex

/* 
页面自动刷新控制
*/
export default {
  namespaced: true,
  state: {
    // 基础资料页面自动刷新，目前是详情页新增后列表自动刷新
    basicRefresh: {
      partList: 0
    }


  },
  mutations: {
    // 要刷新的页面赋值
    setPageRefresh (state, routeName) {
      console.log('setPageRefresh', state.basicRefresh[routeName.replace("Edit", "List")]);
      state.basicRefresh[routeName.replace("Edit", "List")]++
      console.log('setPageRefresh', state.basicRefresh[routeName.replace("Edit", "List")]);

    }
  },
  actions: {},
  getters: {},
};

详情页执行完新增保存后，触发vuex的setPageRefresh去更新刷新标志basicRefresh[路由名]

详情页保存后：

  this.$store.commit(
                "pageRefresh/setPageRefresh",
                 this.$route.name
               );

可以看到保存一次三个页面都有刷新，而且路由是相同的：

这样的话如果有赋值操作那么三个页面的数据就混在一起了