Vuex: MapGetters not working for modules with namespaced=true in vuex

Created on 16 May 2019  路  5Comments  路  Source: vuejs/vuex

Version

3.1.1

Reproduction link

https://gitlab.com/Xambey/large

Steps to reproduce

1) Run the application.
2) Open console in web browser (or vue extensions)
3) Catch the error in the log (ChildA.vue: 14 )

"Property or method "score" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property"

found in

---> at src/components/ChildA.vue
at src/components/Parent.vue
at src/App.vue

What is expected?

The getter 'score' is created in my component. (this.$store.getters['scoreBoard/score'] -> this.score)

What is actually happening?

Getter no mapped, vue google chrome extension show what state existed https://i.imgur.com/QKB7Wqm.png


computed: {
    ...mapGetters([
      'scoreBoard/score' // Not found when /scoreBoard/score is existed. 
    ])
  }

if you do this, then everything works (or namespaced = false):

computed: {
    ...mapGetters({
      score: 'scoreBoard/score'
    })
  }

Most helpful comment

As @liyangworld said.
Vuex does not implicitly omit namespace for you. If you mean you want to save typing for many getters, pass namespace string to 1st argument.

computed: {
  ...mapGetters('scoreBoard', ['score'])
}

All 5 comments

computed: {
    ...mapGetters([
      'scoreBoard/score' 
    ])
  }

the upper is equal to the lower:

computed: {
    ...mapGetters({
      'scoreBoard/score' : 'scoreBoard/score' 
    })
  }

@liyangworld thanks. I realized. It turns out that there are some problems from using the namespace for submodules, they can be called only explicitly and they cannot be imported normally ... Is there any alternative way to import getters implicitly in the form of scoreBoard / score -> score? I could store all the names of actions, mutations and getters in the global space in the dictionary of constants that would have the name of the module in the beginning, but this doesnt suit me

As @liyangworld said.
Vuex does not implicitly omit namespace for you. If you mean you want to save typing for many getters, pass namespace string to 1st argument.

computed: {
  ...mapGetters('scoreBoard', ['score'])
}

createNamespacedHelpers()

@Xambey there are two ways you can to it

  1. first way do this
computed: {
   ...mapGetters('scoreBoard',['score'])
}

buy this upper method you have said that scoreBoard is the module then what following in the array are getters that you have in the module

  1. another way is this one
computed: {
 ...mapGetters({
        score: 'scoreBoard/score'
     }) 
}

I think there are understandable

Was this page helpful?
0 / 5 - 0 ratings