Vuex магазин получатель пуст

Question

Я следую примеру кода в руководстве Vuex и получаю странный результат (по крайней мере, для меня).

Магазин Vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: ""
  },

  mutations: {
    updateName(state, newName) {
      state.name = newName;
    }
  },

  getters: {
    getName: state => state.name
  }
});

export default store;

Компонент внутри тегов <script>:

import { mapGetters } from "vuex";

export default {
  name: "Home",

  data: function() {
    return {
      showingName: true
    };
  },

  computed: {
    ...mapGetters(["getName"])
  },

  methods: {
    getNameHandler() {
      // eslint-disable-next-line
      console.log(this.$store.getters.getname); // returns undefined
    }
  }
};

Вот живой пример: https://codesandbox.io/s/yww774xrmj

По сути, вопрос в том, почему console.log возвращается не назначенным?это можно увидеть, нажав кнопку в компоненте Home .Я следую той же схеме, как показано в официальном руководстве Vuex:

https://vuex.vuejs.org/guide/getters.html#property-style-access

Если я не пропускаю импорт или Vue.use(), но мое внимание привлекает то, чтоиспользование «mapGetters» фактически позволяет мне использовать геттер в качестве вычисляемого свойства.Вы можете изменить имя свойства штата с помощью кнопки в компоненте About .

Answer 1

Прежде всего установите плагин chrome для vuex link .

Пожалуйста, проверьте ваши мутации -> updateName обновляет состояние или нет, тогда вы получите свою ценность от получателей -> getName.

Надеюсь, это поможет вам.

Спасибо.

Answer 2

Имя получателя чувствительно к регистру.

this.$store.getters.getName

У вас есть

this.$store.getters.getname