对象在 vue3 typescript 中可能是“未定义”

Question

下面的代码基于 vue3，使用了 typescript。

export interface TenantDto {
    uuid: string;
    name: string;
}

export const useTenantStore = defineStore('tenant',{
    state: () => ({
    tenants: [],
  }),
  actions: {

    setMyTenants: (payload: TenantDto[]) => {
            this.tenants = payload;
    },

});

在生产环境中编译代码会产生错误

  this.tenants = payload;

错误表明对象可能是“未定义”。

我该如何解决它？

Answer 1

您不能使用箭头函数来定义操作，因为它依赖于

this

关键字。

试试这个：

export const useTenantStore = defineStore('tenant', {
  state: () => ({
    tenants: [],
  }),
  actions: {
    setMyTenants(payload: TenantDto[]) {
      this.tenants = payload;
    },
  }
});