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

Encountering CORS error when making a call to AWS API from Angular 9

Identifying a shift in data model within a component

Steps to utilize redux in a fresh react class component

Whenever I try to update my list of products, I encounter an error message stating that the property 'title' cannot be read because it is null

Challenges with utilizing Ionic Native in a cross-platform application

Working with dynamic checkbox values in VueJS 2

Typescript: Subscribed information mysteriously disappeared

Exploring the power of async/await and promise in TypeScript

Combining the namespace and variable declarations into a single statement

Utilizing Angular for enhanced search functionality by sending multiple query parameters

ts-node: The colon symbol was not expected in this context

Obtain a filtering dropdown list directly from the database within Ag-grid

Receiving a null value when accessing process.env[serviceBus]

What is the best way to set up an endpoint in Angular for image uploading?

Learn the process of setting up a connection between Express JS and the NotionAPI using both POST and

How to identify the type of a union type in Typescript

Is there a way to get interpolation working outside of onInit?

Error: The 'Window' object is not defined. The use of Client in NextJS13 is not

Typescript controller inheritance leading to Error: $injector:unpr Unknown Provider due to minification

GlobalsService is encountering an issue resolving all parameters: (?)