CODEWITHSUNDEEP
javascriptvuexnuxt.js
Markus
Markus

Reputation: 2060

NuxtJS value from Vuex Store undefined

I've created a vuex store like this in Nuxt.

export const state = () => ({
  id: "",
  type: null,
  name: null,
});

export const mutations = {
  setProfile(state, profile) {
    state.id = profile.idStr;
    state.type = profile.type;
    state.name = profile.name;
  }
};

export const getters = {
  name(state) {
    return state.name;
  }
};

The data is stored with store.commit("profile/setProfile", profile.data); and successfuly set. (Values are shown in chrome dev-tools)

Now I'm trying to access the property name in one of my components using the mapGetters method like this.

import { mapGetters } from "vuex";

export default {
  computed: mapGetters({
    name: "profile/name"
  })
};

My problem is that the getter is not found.

ERROR  [vuex] unknown getter: profile/name

What is wrong with this approach?

Upvotes: 1

Views: 798

Answers (2)

Lucas
Lucas

Reputation: 74

as of now (nuxt v2.14.7) the syntax is

    export default {
        computed: {
            ...mapGetters({getName: 'profile/name'}),
        }
    }

then in the component the getter can be used as

    this.getName;

Upvotes: 0

Jonathan
Jonathan

Reputation: 11504

Do you need to use mapGetters instead of mapState?

Upvotes: 1

Related Questions