Vue.js VueJS-如何跨多个组件分离类实例？（与装修工）

当我多次使用一个组件时，它们之间共享一个类实例。我想在创建组件时获取异步数据，然后将这些数据映射到一个类中以使用它

this.product=新产品（产品）

不是独立的，但似乎共享同一个实例。所有组件都将最后获取的产品作为其产品属性，好像创建的

将影响相同名称的所有组件，而不仅仅是“当前呈现的”

如何解决这个问题

例子
//默认设置
从“@app/classes/Client”导入{Client}”；
从“@app/classes/Product”导入{Product}”；
导出默认Vue.extend({
名称：“MyComponent”作为字符串，
道具：{
卡：对象
},
数据（）{
返回{
产品：{}
}
},
创建（）{
client.fetchProduct（'productname'）
。然后（（产品）=>{
本产品=新产品（产品）；
});
}
})
//与TS&decorators合作
从“Vue属性装饰器”导入{Component，Prop，Vue}；
从“@app/classes/Client”导入{Client}”；
从“@app/classes/Product”导入{Product}”；
@组成部分
导出默认类MyComponent扩展Vue{
乘积={}；
created（）：void{
Client.fetchPoduct（'productname'））
.then（（乘积：{}）=>{
本产品=新产品（产品）；
});
}
};
谢谢，我知道如何用Vuex解决这个问题。我只是不明白这种行为的原因。也许我没有正确理解你的情况，但是你能澄清一下当前的行为和期望的行为吗？这可能取决于未显示的客户端和产品。谢谢，我知道如何使用Vuex解决此问题。我只是不明白这种行为的原因。也许我没有正确理解你的情况，但是你能澄清一下当前的行为和期望的行为吗？这可能取决于未显示的客户机和产品。
// Default setup
<script>
  import { Client } from "@app/classes/Client";
  import { Product } from "@app/classes/Product";

  export default Vue.extend({
    name: 'MyComponent' as string,
     props: {
       card: Object
     },
    data() {
      return {
        product: {}
      }
    },

    created() {
      client.fetchProduct('productname')
      .then((product) => {
        this.product = new Product(product);
      });
    }
  })
</script>

// With TS & decorators
<script lang="ts">
  import { Component, Prop, Vue } from "vue-property-decorator";
  import { Client } from "@app/classes/Client";
  import { Product } from "@app/classes/Product";

  @Component
  export default class MyComponent extends Vue {
    product = {};
    created(): void {
      Client.fetchPoduct('productname')
      .then((product: {}) => {
        this.product = new Product(product);
      });
    }
  };
</script>