vue 3无法在方法中访问数据对象

Question

我的vue3应用程序出错了。我正在尝试在methods{}块中创建一个函数，该块访问dynamodb，并创建一个数据列表映射，我希望将其传递给带有道具的子组件。我正在调用与dynamoDB在created(){}块中通信的函数。

我不太擅长传递数据。相反，当试图在productsData块中填充data(){}对象时，我会得到以下错误。

我正在将products prop的类型设置为我定义的接口。

然后，我将productsData data对象转换为products prop类型。

由于某些原因，我无法将push()映射到this.productsData对象，因为它是undefined。

这是错误

[Vue warn]: Missing required prop: "products" 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:6589
TypeError: _this.productsData is undefined

html：

<template>
  <div class="home">
    <HelloWorld :key="key" :products="products" />
  </div>
</template>

打字本代码：

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { DynamoDBClient, QueryCommand } from "@aws-sdk/client-dynamodb";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";
import DBResponse from "@/interfaces/DBResponse";
import HelloWorld from "@/components/HelloWorld.vue";

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
  },
  props: {
    products: {
      type: Object as PropType<DBResponse[]>,
      required: true,
    },
  },
  data() {
    return {
      key: 0,
      productsData: this.products,
    };
  },
  methods: {
    forceRerender() {
      this.key += 1;
    },
    async getProductData() {
      const region = process.env.VUE_APP_AWS_REGION as string;
      const clientDynamoDB = new DynamoDBClient({
        region,
        credentials: fromCognitoIdentityPool({
          identityPoolId: process.env.VUE_APP_IDENTITY_POOL_ID as string,
          accountId: process.env.VUE_APP_AWS_ACCOUNT_ID,
          clientConfig: { region },
        }),
      });
      const query_input = {
        TableName: process.env.VUE_APP_TABLE_NAME,
        IndexName: "GSI1",
        KeyConditionExpression: "SK = :sort_key and DK1 = :data_key",
        ExpressionAttributeValues: {
          ":sort_key": { S: "PRODUCT#BLEND" },
          ":data_key": { S: "listed" },
        },
        Select: "ALL_ATTRIBUTES",
      };
      const command = new QueryCommand(query_input);
      try {
        const results = await clientDynamoDB.send(command);
        const items = results.Items;
        const cloudfrontHost = process.env.VUE_APP_CLOUDFRONT_HOST as string;
        if (items) {
          for (const key in items) {
            const item = items[key];
            this.productsData.push({
              id: item.PK.S?.split("PRODUCT#")[1],
              name: item.Name.S,
              src: cloudfrontHost.concat(
                "/products/assets/",
                item.PK.S?.split("PRODUCT#")[1] as string,
                ".png"
              ),
              description: item.Description.S,
              price: item.Price.S,
            });
          }
        }
      } catch (err) {
        console.error(err);
      }
      console.log(this.productsData);
      this.forceRerender();
    },
  },
  created() {
    this.getProductData();
  },
});
</script>

Answer 1

productsData被初始化为products，但是缺少products支柱(如错误消息中所示)，因此两者都是undefined。

基于您的comment，您实际上根本不需要products支柱。您是通过将数据推入getProductsData() (从created()钩子调用)中设置它来设置它的，因此products支柱甚至不起作用。

解决方案似乎是删除products支柱，并使用类型断言(as DBResponse[])将productsData初始化为空数组：

export default defineComponent({
  //props: {
  //  products: {
  //    type: Object as PropType<DBResponse[]>,
  //    required: true,
  //  },
  //},
  data() {
    return {
      //productsData: this.products,
      productsData: [] as DBResponse[]
    };
  },
})