Vue3 TypeScript may potentially have an object that is 'undefined'

Question

Vue3 TypeScript may potentially have an object that is 'undefined'

This piece of code is Vue3 with TypeScript-based.

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

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

When compiling the code in production, an error occurs on the following line:

this.tenants = payload;

The error indicates that the object is possibly 'undefined'.

How can I resolve this issue?

javascript typescript vue.js vuejs3 pinia

Answer 1

Answer №1

It is important to note that arrow functions do not work for defining actions because they depend on the this keyword.

Instead, consider using the following approach:

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

Answer 2

It is important to note that arrow functions do not work for defining actions because they depend on the this keyword.

Instead, consider using the following approach:

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

Answer 3

Answer №2

While @alexwbt provided insight into the issue and solution, an additional approach could involve specifying Setup Stores instead of using 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,
  };
});

Answer 4

While @alexwbt provided insight into the issue and solution, an additional approach could involve specifying Setup Stores instead of using 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,
  };
});

Vue3 TypeScript may potentially have an object that is 'undefined'

Answer №1

Answer №2

Similar questions

Javascript/jquery functions perfectly in all browsers except Firefox

Contrasting `Function` with `(...args: any[]) => any`

Navigating through embedded arrays in Angular

Creating dynamic keys to insert objects

What is the best way to access event.target as an object in Angular 2?

Revise and optimize the solution for an algorithm using JavaScript

Troubleshooting the failure of the fetch function in my React application

Ensuring the proper typescript type for assigning a value in react-hook-form

Guide to importing multiple controllers using express

The error message for ExpressJS states: "Headers cannot be set after they have already been sent."

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Using a conditional statement to wrap a react Route

Customizing the Zoom Control Style in Vue Leaflet

Displaying the data from a database on a browser using node.js, MySQL, and Jade

How to Eliminate Image Flickering While Loading in a React Component

Error: You can't use the 'await' keyword in this context

Error message "TypeError: onClick is not a function" occurs when attempting to use a prop in a functional component

Tips for successfully sending an array of numbers using TypeScript and React

Transform a PNG image with transparency into a JPEG file using imagemagick

Even though I included a key prop for each item, I am still encountering the error message stating that every child in a list should have a distinct "key" prop