监听路由的变化再次发请求获取数据

mounted() {
    this.getData();
//在组件挂载完之后获取数据
  },
  methods: {
    getData() {
      this.$store.dispatch("getSearchList", this.searchParams);
    },
  },

在上节课留下的一个小bug，这导致了只会对服务器请求一次数据((组件挂载完之后请求)

我们可以通过监听路由的变化从而对服务器再次请求数据

watch: {
    $route(newValue, oldValue) {
      Object.assign(this.searchParams, this.$route.query, this.$route.params);
      this.getData();

这里又涉及到了对watch的使用

这里不用this.$route的原因是$route是属于组件身上的响应式数据 所以没必要加this

watch: {
    $route(newValue, oldValue) {
      Object.assign(this.searchParams, this.$route.query, this.$route.params);
      this.getData();
      console.log(this.searchParams);
      this.searchParams.category1Id = "";
      this.searchParams.category2Id = "";
      this.searchParams.category3Id = "";
    },
  },

最后一步

     每次请求完之后对categoryid（1，2，3）进行重置，如果不设置为空它会一直存在于route中

而categoryName和keyword不用设置为空的原因是每次重新请求数据 这两个属性值都会有新的属性值 从而将旧的属性值覆盖

这节课主要学习了如何对再搜索的处理，通过监听路由的变化进行对服务器进行再请求。

之前对watch没怎么使用过，这节课过后有了一定的理解

vue文档：

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。