关于路由和Vuex擦出的那点火花

这是本人在用vue做项目的一些经验，以此作为日常记录
第一小段：

1.问题：

route + vuex,在项目中遇到的是不同页面之间相互跳转，route会刷新数据，但是vuex不能记录最新的数值的问题；

2.解决方法：

主要是通过mapState（+必要时采取localStorage或者sessionStorage保存一个键值）来获取最新的属性，之后通过dispatch来分发action方法从而commit mutation 最后改变state的属性值（这是最基本的连环操作，哈哈）；

3.还是直接上代码吧：简单，明了和复用

 store 中：
// actions
const actions = {
    changeParam({commit},params){  //  修改参数
 commit(types.GET_NEW_PARAM,{ params });
    },
    getAllProducts({commit,state}){ // 获取所有车位列表
 axios.post(proApi.api.commonListApi,state.goodParam)
   .then((response)=>{
     Util.processRes(response,(responseData)=>{
   let products = responseData.data;
  commit(types.GET_GOODS_LIST,{ products })
     },(responseData)=>{
// todo
     })
 });
    }
}

// mutations
const mutations = {
    [types.GET_GOODS_LIST](state,{ products }){
 state.goodList = products;
    },
    [types.GET_NEW_PARAM](state,{ params }){
 for (var i in   state.goodParam) {
   for (var j in params) {
     if (i == j) {
state.goodParam[i] = params[j];
     }
   }
 }
     }
  }
// 以上是strore中主要的点

在单文件.vue中处理

 mounted(){
      this.navTabIndex;  // 注意需要在首先渲染，否则没有实际的作用
    },

  computed:{
      ...mapState({
   "navTabIndex": function(state){ // 箭头函数会有this的问题
let nowRoute = this.$route.name;  // 当前路由 
this.switchPage(nowRoute);  // 根据路由修改请求参数
this.$store.dispatch('changeParam', this.param); // 同步操作
return state.goods.goodParam;  // 在计算属性中，返回最新请求参数
     }
      }),
    }

// 监听路由变化
    watch:{
 $route(val){
   this.switchPage(val.name); // 一个switch选择语句，判断当前路由，然后修该.vue中的this.param 请求参数
   this.$store.dispatch('changeParam',this.param);
   this.$store.dispatch('getAllProducts');
 },
      },