Using TypeScript along with Nuxt.js and Vuex to access methods from an imported class

Question

Using TypeScript along with Nuxt.js and Vuex to access methods from an imported class

Currently, I am in the process of developing a nuxt.js application with typescript and my goal is to segregate the API Calls from the vuex store. However, I've encountered an issue where it seems like I cannot utilize the methods when importing the class. The compiler keeps throwing an error TS1005: ',' expected. each time I attempt to invoke a method.

apiClient.ts

export default class apiClient {
    helloWorld() {
        console.log('Hello World');
    }
}

products.ts:

import ApiClient from '../services/apiClient';

export const actions = {
  ApiClient.helloWorld();
};

tsconfig.json

 "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./src/*"
      ],
      "@/*": [
        "./src/*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  },

typescript nuxt.js vuex

Answer 1

Answer №1

Your code has a few issues that need to be addressed.

Firstly, the way you are defining your actions is incorrect. You should not write your function directly into the actions object. Instead, you need to define a key and then assign your function to that key, like this:

export const actions = {
  helloWorld: ApiClient.helloWorld,
};

It's important to note that you should not include parentheses when assigning your function as it is being assigned, not executed.

Even with this correction, your code will still not compile because you have defined your methods within a class. While there's nothing inherently wrong with this approach, if you choose to use a class, you must instantiate it using the new keyword (or make your class static):

import ApiClient from '../services/apiClient';
const client = new ApiClient();

export const actions = {
  helloWorld: client.helloWorld,
};

In this scenario, it might be simpler to export your functions directly without using a class:

export const helloWorld = () => {
  console.log('Hello World');
};

With this setup, importing becomes easier and you can even omit the key in the exported function name:

import { helloWorld } from '../services/apiClient';

export const actions = {
  helloWorld,
  // or use a different name:
  hello: helloWorld,
};

I hope these suggestions help resolve your issues and clarify why your original code was not functioning correctly.

Answer 2

Your code has a few issues that need to be addressed.

Firstly, the way you are defining your actions is incorrect. You should not write your function directly into the actions object. Instead, you need to define a key and then assign your function to that key, like this:

export const actions = {
  helloWorld: ApiClient.helloWorld,
};

It's important to note that you should not include parentheses when assigning your function as it is being assigned, not executed.

Even with this correction, your code will still not compile because you have defined your methods within a class. While there's nothing inherently wrong with this approach, if you choose to use a class, you must instantiate it using the new keyword (or make your class static):

import ApiClient from '../services/apiClient';
const client = new ApiClient();

export const actions = {
  helloWorld: client.helloWorld,
};

In this scenario, it might be simpler to export your functions directly without using a class:

export const helloWorld = () => {
  console.log('Hello World');
};

With this setup, importing becomes easier and you can even omit the key in the exported function name:

import { helloWorld } from '../services/apiClient';

export const actions = {
  helloWorld,
  // or use a different name:
  hello: helloWorld,
};

I hope these suggestions help resolve your issues and clarify why your original code was not functioning correctly.

Using TypeScript along with Nuxt.js and Vuex to access methods from an imported class

Answer №1

Similar questions

Is it necessary to validate a token with each change of page?

Tips for adding temporary text in filter input of Kendo UI Grid using Angular

Application: The initialization event in the electron app is not being triggered

Is it possible to conceal a table element using [hidden] in Angular 2?

TypeScript React Object.assign method return type

Utilize the optional chaining feature when accessing properties that may be optional

What is the best way to organize my NPM package with separate directories for types and functions?

Leveraging both function arguments and the 'this' keyword within a single

To utilize this.<module> within a Nuxt plugin, simply access it

The upcoming development server will exclusively deliver HTML content without scripts or assets, mirroring the setup of the standard create-next-app template

Experience the power of Vue Google Chart - Geochart where the chart refreshes seamlessly with data updates, although the legend seems to disappear

How can I limit the input of string values from a Node Express request query?

"Error TS2339: The property specified does not exist within type definition", located on the input field

Accessing information necessitates two separate subscriptions

Is there a way to streamline this function call that appears to be redundantly repeating the same actions?

Issues with TypeScript: outFile in tsconfig not functioning as expected

What is the best way to enhance a react-bootstrap component with TypeScript?

Capturing the returned value of a mutation in another mutation in Vuex

Jest identifies active handles when executing synchronous scrypt operations in the crypto module of Node.js

Issue with the manual page refreshing caused by parameters included in the URL