CODEWITHSUNDEEP
javascriptdata-bindingstorevue.jsvuex
Konrad Viltersten
Konrad Viltersten

Reputation: 39128

Can't access getters in the store for Vue when in a template

I have a component with the following rendering (computed props). It works and shows the text as supposed to for blopp but nothing for blipp. In the final version, I want it to produce a list of strings brought from the state of the store and serve as blipp.

export default {
  computed:{
    blopp: function(){ return "ghjk,l"; },
    blipp: function(){ return this.$store.getters.getBlipp(); }
  }
}

It's rendered based on the following template.

<template>
  <div>
    ...
    <div v-bind:blopp="blopp">{{blopp}}</div>
    <div v-bind:blipp="blipp">{{blipp}}</div>
  </div>
</template>

The implementation of the store looks like this bringing the getters to the open forum.

...
const state = { blipp: [], ... };
const getters = {
  getBlipp: function() { return state.Blipp; }, ...
}
export default new Vuex.Store({ state, mutations, actions, getters });

The second component gets no value in it at all and I'm not sure where to look for the cause.

I probably set it up incorrectly but it's a lot of moving parts and a bit hard to diagnose for the ignorant me. When I try to run the following in the console,

temp.$store.getters

I get an object which lists the getters like this.

...
blipp:(...)
get blipp: function()
__proto__: Onject

Not certain what to do with that info... It appears to be a function but when I try to invoke it, it says it's undefinied.

Upvotes: 0

Views: 5367

Answers (1)

GuyC
GuyC

Reputation: 6574

getters function in a similar manner to states. Therefore to resolve them you call a parameter not a method, i.e.

blipp: function() { return this.$store.getters.getBlipp }

In this case you probably want to rename getBlipp to simply blipp

I put together a JSFiddle which shows the various ways you can interact with vuex's store, hope it helps:

Example Vuex JSFiddle

Upvotes: 2

Related Questions