Vue 反应性，如何改进嵌套组件依赖结构

Question

我有一个父搜索组件，它根据搜索参数的更改加载数据，它有一个子组件，基本上是为了分离复杂的逻辑而创建的，例如

<HelloWorld/>

，它根据状态的更改触发事件并将数据传递给父组件，例如（可以是选择器、输入更改等...）。我想要的是等待子组件触发其初始事件和父组件，然后调用监视中的函数来获取搜索参数。

当前此代码正在发出两个请求，我想等待子事件被触发以使其成为单个调用，或者如果这种架构有替代解决方案，我将不胜感激。

<template>
  <HelloWorld @id-change="(e) => (searchParams.userIds = e)" />
</template>

<script>
import HelloWorldVue from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld: HelloWorldVue,
  },
  data() {
    return {
      searchParams: {
        userIds: [],
        sort: "ID",
        sortType: "DESC",
      },
    };
  },
  watch: {
    searchParams: {
      handler(newVal) {
        console.log("hello", newVal);
        this.loadDataFromBackend(newVal);
      },
      deep: true,
    },
  },
  created() {
    //some logic would change search params here
    //based on which page I am coming from, 
    //or I may have route params etc...
    this.searchParams.sortType = "ASEC";
  },
  methods: {
    loadDataFromBackend(params) {
      //an api call here
    },
  },
};
</script>

这是加载 Id 并将其传递给父组件的子组件。

<template>
  <div ></div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  created() {
    //this event does not hapeeing immedialty
    setTimeout(this.loadIdsFromBackend, 5000);
  },
  methods: {
    async loadIdsFromBackend() {
      this.$emit("id-change", [1, 2, 3, 4]);
    },
  },
};
</script>

我想要一种方法将其带到单个调用中，但目前它调用

loadFromBackendFunction

两次，是的，我状态更改了两次，因此需要两次调用，但我想要一个替代解决方案。

Answer 1

我猜第一个电话来自这部分

  created() {
    this.searchParams.sortType = "ASEC";
  },

它会触发观察者并导致第一次调用

loadDataFromBackend

但是为什么在

sortType

中将

DESC

设置为

data()

并在创建后立即更改为

ASEC

？

这对我来说没有任何意义。我只是将

ASEC

设置为默认值。