1

我有一个 Vue 组件，其中包含通过 Apollo 从数据库填充的项目列表：

<DeviceInfo camId="abcd"/>
<DeviceInfo camId="efgh"/>
<DeviceInfo camId="qwer"/>

当响应通过 Apollo 到达时，所有三个 DeviceInfo组件都会同时使用相同的数据进行更新。最后，他们都得到了数据库的最后回应。我希望查询只更新它自己的组件。

有什么建议为什么要共享数据？

我知道的：

  1. 数据库响应是正确的，并且包含正确 camId 的数据，就apollo/data/updated函数而言。
  2. Vue 浏览器开发工具为所有DeviceInfo兄弟显示相同的数据对象。
  3. 我得到与v-for相同的行为
<v-flex v-for="item in data.listUserDevices.items" :key="item.device">
   <DeviceInfo :camId="item.device"/>
</v-flex>

下面是DeviceInfo组件的完整代码：

<template v-if="hydrated">
      <h2>camId: {{camId}} / {{ data.getLatestDeviceState.items[0].device }}</h2>
</template>


<script>
import gql from "graphql-tag";

const DEV_INFO_QUERY = gql`query getLatestDeviceState($device: String)
  {
    getLatestDeviceState(device: $device) {
      items {
        device
        timestamp
        version
      }
    }
  }
`;

export default {
  name: "DeviceInfo",
  props: {camId: String},
  data() {
      return dt;
    },
  async mounted() {
    await this.$apollo.provider.defaultClient.hydrated();
    this.hydrated = true;
  },
  apollo: {
    data: {
      query:  () => DEV_INFO_QUERY,
      variables: function() { 
        return {device: this.camId}
      },
      update: data => {
                return data;
      }
    }
  }
};

  let dt = {
    data: {
      hydrated: false,
      getLatestDeviceState: {
        items: [{device:"Loading ..."}]
      }
    }
  };

</script>
4

1 回答 1

0

dt（我假设的“数据模板”的缩写）在您的组件定义中定义，因此所有实例都将共享同一个对象。

一个简单的解决方案是将其用作模板，但会破坏data函数中的对象引用，即

data() {
  return {...dt}
}
于 2019-01-10T06:03:22.467 回答