Creating a State in Typescript Vuex with Accessors: A Step-by-Step Guide

Within the vuex store, I am attempting to initialize a state called _token. However, when I try to access the property within the same class, I am encountering an error message stating that the setter for _token is not defined. Can anyone shed light on why only the getter is accessible?

export default class Api extends VuexModule {
  public _token = '';

  @Action
  public async [VuexActionsApi.VerifyUser](data: any): Promise<IResponseState> {
    const vuexInstance = this;

    // The following assignment is causing issues
    vuexInstance._token = "test";
}

https://i.sstatic.net/b43wE.png

Answer №1

When using class decorators, make sure to import them and install the necessary package with this code:

import Action from 'vue-class-component'

However, it is worth noting that this syntax is deprecated in vue3. For more information, refer to: https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121

Answer №2

After making a small adjustment, it is now functioning as expected. The state was defined in the following manner:

public data = {
  bearerToken: undefined
};

Subsequently, the setter and getter functions were successfully generated. Can anyone provide insight as to why the initial method was unsuccessful?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Return to the previous page with different query parameters, not the same one

When it comes to reverting state location back by 1 step in Angular, we can utilize something along the lines of this.location.back();. This method works well unless the system redirects to the same URL but with different query parameters. In such cases, ...

What is the best way to identify errors in an express listen callback function?

My current code is set up to verify if there was an error while initiating Express: express() .listen(port, (err: Error) => { if (err) { console.error(err); return; } console.log(`Express started`); ...

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

Tips for customizing the selection tip of a custom cursor using CSS

I have integrated a color picker jquery plugin on my website to allow users to pick colors from an image. I made a modification in the CSS to change the cursor to an eyedropper icon. However, currently when clicking on the image, the color pointed by the u ...

Many inhabitants - utilizing mongoosejs

Just a simple question, for example with a double reference in the model. Schema / Model var OrderSchema = new Schema({ user: { type : Schema.Types.ObjectId, ref : 'User', required: true }, meal: { ...

When tab switching occurs, the alert box fails to be processed by the browser

When using the alert(message) function, it will display an alert box with a message and an OK button. It will also pause the execution of any code that follows until the OK button is clicked. However, I have noticed a peculiar situation where switching tab ...

Strategies for integrating user data into Vue components within Laravel

I've successfully logged my user data in the console, but when I try to display the data on Contalist page, nothing is returned. I'm new to using Vue and need help implementing it into my projects. Below are my PHP controller and Vue component fi ...

What is the correct way to execute the query "select * from table where indexA >= 'a' order by indexB ASC limit 10" in indexedDB?

As I delve into learning about javascript IndexedDB, I have encountered a challenge in executing complex queries. My goal is to perform a select query like this one: "select * from table where indexA >= 'a' order by indexB ASC limit 10" I a ...

Is there a way to integrate a Vuex store with Storybook?

I encountered an issue with my Storybook where it couldn't locate the Vuex store for performing an API call in a component story using an ACTION. The error message received was: Unhandled promise rejection TypeError: "this.$store is undefined". My at ...

Exploring the incorporation of an inclusive switch statement within a Redux reducer utilizing Typescript. Strategies for managing Redux's internal @@redux actions

After conducting extensive research, I have yet to discover a definitive answer to this query. There is a question posted on Stack Overflow that provides guidance on how to implement a thorough switch statement: How can I ensure my switch block covers al ...

Utilizing Images with 'General Drawing' in Highcharts

I'm currently attempting to create a task diagram using Highcharts. I had the idea of incorporating images using the <img> tag ren.label('<img src="/images/test.jepg', 10, 82) .attr({ ...

Having trouble getting an HTML form to work when making a PHP and Ajax request

I am trying to validate an HTML form using Ajax to prevent the browser from loading the page. Ideally, when a user enters their first name, it should display above the HTML form. However, I am encountering an issue where it is not showing up as expected... ...

Node app experiencing issues with passport authentication request route only in production mode

Currently, I am facing an issue with my MERN app that includes passport for authentication flow. It runs smoothly in development mode but encounters major problems in production mode that I am struggling to resolve. The bug seems elusive and I can't p ...

Invoke a function or variable based on a string parameter within a JavaScript/React function dynamically

I am currently exploring ways to dynamically call a function based on a string or reference a variable using a string. For example: import React, {useState} from 'react' const array = [ { text: 'count1', setFunctionName: &apo ...

Using SetTimeout with the TextInput component in a React-Native application

Currently, I am working on creating a SearchBar component for my new Android application using React-Native. As a newcomer to React-Native, I created a function called _changeInput() to handle passing text to a local function. Initially, the text pass wor ...

Can one initiate a server within Zapier Code?

Is there a way to send an HTTP CODE = 200 with a response body of 'OK' when receiving a notification on Zapier? I attempted to use the following code snippet in Zapier: var http = require('http'); const server = http.createServer((r ...

Triggering the react state update function through an onClick event

Trying to grasp React through a tutorial, but I'm confused about why I need to create a new function to pass to an JSX onClick instead of using the one returned from a React useState call directly. The following code works because it uses the handleB ...

Is there a way to fill select boxes with multiple values?

As I set up a jqGrid, I encountered the challenge of visualizing multiple values in one cell. The data is sourced from a form where users can select multiple options. While I managed to display the select box, I struggled with populating it. My attempts to ...

The state remains constant upon clicking

Below is the code snippet of my component: import React from "react"; import { useState } from "react"; import { Text, SvgContainer, Svg, Flex } from "../lib/styles"; import Modal from "./Modal"; const Credits = () ...

Setting up APIGateway for CORS with the CDK: A Step-by-Step Guide

My API relies on AWS ApiGateway with an underlying AWS Lambda function provisioned through the CDK. The default CORS settings for the API are as follows: const api = new apiGateway.RestApi(this, "comments-api", { defaultCorsPreflightOptions: { ...