Question

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

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

通过Apollo到达响应时，所有三个 DeviceInfo 组件将同时使用相同的数据进行更新。最后，他们都有来自数据库的最后响应。我希望查询仅更新其自己的组件。

关于共享数据的任何建议？

我所知道的：

数据库响应是正确的，并且根据 apollo / data / updated 函数包含正确的camId的数据。
Vue浏览器开发工具为所有 DeviceInfo 兄弟姐妹显示相同的数据对象。
我在 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>

Answer 1

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

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

data() {
  return {...dt}
}

来自一个组件的Apollo查询会更新Vue中的所有同级

1 个答案: