代码之家 › 专栏 › 技术社区 › user824624

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

typescript

1

user824624 · 技术社区 · 2 年前

下面的代码基于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;

错误是说Object可能“未定义”。

我该如何处理?

2 回复 | 直到 2 年前

1

2

alexwbt 2 年前

不能使用箭头函数定义操作,因为它依赖于 this 关键字。

请尝试以下操作:

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

2

1

rozsazoltan 2 年前

然而 @alexwbt described the problem & solution , 另一种选择是指定 Setup Stores 而不是 Option Stores .

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useTenantStore = defineStore('tenant', () => {
  const tenants = ref([]);
  
  const setMyTenants = (payload) => {
    tenants.value = payload;
  }

  return {
    tenants,
    setMyTenants,
  };
});