vue 3无法访问方法中的数据对象答案

【问题标题】：vue 3 unable to access data object in methodvue 3无法访问方法中的数据对象
【发布时间】：2022-01-05 20:03:11
【问题描述】：

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

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

我将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>

【问题讨论】：

由于 products 是一个路由器视图组件的道具，我希望它可以在您的路由配置的 prop 函数中设置，或者通过查询参数设置，但它是一个对象数组，所以 URL 不是一个理想的媒介。您决定将 products 设为道具的原因是什么？
我不想在我不相信的 URL 中设置它。也许我的结构是错误的。也许我需要这个视图来加载组件，并让组件进行 dynamodb 查找。从那里，组件可以向视图发出一些东西，并在完全解析响应后强制组件重新加载，以便我的产品呈现？

标签： typescript vue.js vuejs3

【解决方案1】：

productsData 初始化为 products，但缺少 products 属性（如错误消息中所示），因此两者都是 undefined。

根据您的comment，您实际上根本不需要products 属性。您通过在getProductsData()（从created() 挂钩中调用）中将数据推送到productsData[] 来设置productsData[]，因此products 属性甚至没有发挥作用。

解决方案似乎是删除products prop，并将productsData 初始化为带有类型断言（as DBResponse[]）的空数组：

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

【讨论】：