Question

我正在支持多个data source，以通过道具和商店在组件中显示数据。

这个想法是建立一个列表组件，如果没有道具的话，它将从商店中加载数据。否则，显示道具的数据。因此，我在reusability功能和常规search的情况下确保listing view。

这是代码，

<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更改为计算属性。更改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添加到应在{{ 1}}。这里没什么好看的。

您无需通过适当的商店设置手动加载数据。始终使用computed进行吸气剂并将其“装入”组件。

组件的多个数据源

2 个答案: