vue组件与route通信

开发中碰到公共search组件的问题，在与route通信的时候并没有现成的方式方法，因此通过store存值进行实现，逻辑如下

1 首先在store中定义自己的值，只举其中一个例子，其他相关的js自行配置

export default {
  //设置用户信息和登录
  [actions.SET_USER_INFO]({commit}, userinfo){
    commit(mutations.SET_USER_INFO, userinfo)
  }, [actions.SET_SEARCH_VAL]({commit}, searchVal){
    commit(mutations.SET_SEARCH_VAL, searchVal)
  }
}

2  在search组件中点击查询时间的时候需要赋值store中的searchVal

import {mapActions} from 'vuex'
export default{
  data: {
    searchVal: ''
  },
  components: {
    menuRight,
    search
  },
  watch: {
    '$route' (to, from) {
      if (to != from) {
        this.set_search_val("");
        this.searchVal='';
        this.$refs.search.handleCleanClick();
      }
    }
  },
  methods: {
    ...mapActions({
      set_search_val: "set_search_val"
    }),
    submit_search(value) {
      this.set_search_val(value);
    }
  }
}

3 在每个router中增加watch监听，在监听中调用自己的方法进行查询

watch: {
  get_search_val(val){
    this.get_table_data(val)
  }
},
computed: {
 ...mapGetters(['get_search_val'])
},