CODEWITHSUNDEEP
typescriptvuexvuejs3vuex-modulesvuex-module-decorators
Inbar Azulay
Inbar Azulay

Reputation: 287

Using state inside @ModuleAction of vuex-module-decorators

When trying to access the baseUrl set in the state of a module, I get the typescript error: Property 'baseUrl' does not exist on type 'ThisType<any> | (() => ThisType<any>)'.

This is my .ts file:

import { Module, MutationAction, VuexModule } from 'vuex-module-decorators';
import axios from 'axios';

@Module({ namespaced: true, name: 'countriesStore' })
export default class CountriesStore extends VuexModule {
  countries: unknown = {}
  baseUrl = "/api/countries"

  @MutationAction
  async getCountries(): Promise<unknown> {
    const countries = await axios.get(this.state.baseUrl)
    return { countries }
  }
}

What I want is to be able to reach a value set for the whole class, but this gives a typescript error. I can log the baseUrl when I log this.state.baseUrl, but the error lets the build fail. I can type the state as any, like (this.state as any).baseUrl, but this I also something I would like to prevent. Typescript lets me do this.baseUrl, but this returns undefined. Is there a way to reach the state without typing it?

Upvotes: 0

Views: 465

Answers (1)

wseme
wseme

Reputation: 835

I am not sure how you are setting up your Vuex store. But it sounds like you are creating a module and need to call it via that. It looks like you setup the module correctly. Using Vue2js and Vuex3 (important since deprecated) this can be done like:

this.$store.state.countriesStore.baseUrl

It sounds like you are trying to access the value without mentioning the module. If you want to commit or modify the url later, a mutation is needed:

  @Mutation
  setBaseUrl(url: string) {
    this.baseUrl = url
  }

// to invoke, use:
this.$store.commit('countriesStore/baseUrl', 'https://new-url-here.com')

I am not sure if that resolves or answers your question, per say. But I hope it helps.

Upvotes: 0

Related Questions