Easy Solution when Vuex Getters are not working or you can't access Vue Getters

It took me way to long to figure this out. The default getting started of vuex doesn't tell you that there's a big difference when using namespace: true in your store. Instead of accessing your getters like this:
isMenuActive() {
  return this.$store.getters.isMenuActive
},
...you actually have to to do it like this:
isMenuActive() {
  return this.$store.getters['menu/isMenuActive'];
},
I hope this helps. If you are curious: The first example could never work, because, internally, the getters object uses the Bracket Syntax [ ] to store these getters namespaced. It's actually a javascript object that looks like this:
getters: {
  "menu/myFunnyGetter": 250,
  "menu/anotherGetter": "Abracadabra",
  "info/giraffeSize": ">3m"}
}
I like vuex, and it's clearly a capable solution to some problems, but I feel like nowadays, people just don't know how to write good documentation anymore. It's really important to get that down, or else you risk wasting valuable hours of countless people's life. Vue is also very guilty of this, by never providing example file paths or file names in their tutorial section.

Kommentare

Beliebte Posts aus diesem Blog

10 Free YouTube Like And Subscribe Button Animations That Will Give You A Headstart On Your Competition

BE CAREFUL WITH THIS ERROR IN FIVEM SCRIPTING | SendNUIMessage