Import State(developed by javascript) from Vue-Typescript

Question

My project was developed by Vue js and it has store developed by javascript, and I integrated new component which is developed by vue-typescript and all scripts in this components are developed by typescript.

To import state variable, I tried two ways

use Vuex

import { mapGetters, mapState, mapActions, mapMutations, createNamespacedHelpers } from 'vuex'

@Component({
  computed: {
    ...mapState([
      'allowedUrls'
    ])
  }
})

this case this.allowedUrls is not defined error

Use Vuex-Class

import { State } from 'vuex-class'
@State allowedUrls: string[]

this case, this.allowedUrls is always undefined

How can I fix this problem?

Where are you evaluating this.allowedUrls? If in the constructor, allowedUrls would not have been initialized yet. — tony19

LPains LPains · Accepted Answer · 2019-02-18T02:35:57

Not entirely sure what is wrong with your code but I do the same thing in a slightly different way and it works:

import { mapState } from 'vuex';
import RootState from '@/store/rootState';

@Component({
  computed: mapState({
    userFullName: (state: RootState) => state.user.fullName,
    userEmail: (state: RootState) => state.user.email
  })
})

RooState is my class for the vuex state. I'm using vue 2.5.17 and vuex 3.0.1.

Import State(developed by javascript) from Vue-Typescript

1 Answers