组件的多个数据源

Question

我在一个进程中支持多个data source来通过属性和存储在一个组件中显示数据。

我们的想法是构建一个列表组件，如果没有道具，它将从存储中加载数据。否则，显示道具中的数据。因此，我在search功能和普通listing view的上下文中确保reusability。

下面的代码看起来像这样：

<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的上下文中，它本质上是异步的。所以有时候，我看不到数据。

所以我的问题是，dataSource的这个逻辑还能进一步改进吗？

谢谢罗宾。

Answer 1

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

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

有关Vuejs计算的更多信息，请查看the document

Answer 2

无论如何，这是一种糟糕的方法。存储应该用来包含数据，组件应该只是“显示”它，并通过操作和突变来操作它。

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

您不应该需要使用适当的存储设置手动加载数据。始终使用computed创建getter并将其“加载”到组件中。