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返回的值不确定？您可以通过点击首页组件中的按钮来看到。我遵循的是Vuex官方指南中所示的相同模式：

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

除非我缺少导入或Vue.use()，但是引起我注意的是，使用“ mapGetters”实际上允许我将getter用作计算属性。您可以使用关于组件中的按钮更改状态的名称属性。

Answer 1

getter名称区分大小写。

this.$store.getters.getName

您有

this.$store.getters.getname

Answer 2

首先为vuex link安装chrome插件。

请检查您的突变-> updateName是否正在更新状态，然后您将从getters-> getName中获得价值。

我希望能帮到你。

谢谢。

Vuex商店吸气剂为空

2 个答案: