Vue.js 组件的多个数据源

我正在通过props&store支持多个数据源来显示组件中的数据

其想法是构建一个列表组件，如果没有道具，它将从存储中加载数据。否则，显示道具中的数据。因此，我正在确保搜索功能和正常列表视图上下文中的可重用性

这是代码看起来像

<template>
  <div>
    <li v-for="user in this.dataSource" :key="user.age">
      {{ user.name }}
    </li>
  </div>
</template>
<script>
export default {
  props: {
    userData: {
      type: Array,
      default: null,
    }
  },
  created() {
    // dispatch action to get user data
    this.$store.dispatch("GET_USER_DATA");
  },
  data() {
    return {
      dataSource: this.userData !== null ? this.userData: this.$store.state.users
    };
  }
};

到目前为止，存储只保存静态数据。但是在REST的上下文中，它本质上是异步的。所以有时候，我看不到任何数据

所以我的问题是，数据源的这种逻辑是否可以进一步改进

谢谢 Robin。

您应该将数据源更改为computed属性。当this.userData更改或此.store.state.users更改时，它将自动重新计算

computed: {
  dataSource() {
    return this.userData !== null ? this.userData: this.$store.state.users
  }
}

---

有关Vuejs中计算的详细信息，请检查

无论如何，这是一种糟糕的方法。 存储区应用于包含数据，组件应仅显示数据，并通过操作和突变对其进行操作

因此，在本例中，我将删除props、created和data部分，并将getter添加到应该在组件中的computed中实现的存储中。这里没什么特别的

您不需要使用正确的存储设置手动加载数据。始终制作一个getter并将其加载到具有计算结果的组件中