我正在遵循Vuex指南中的示例代码，我得到了一个奇怪的结果（至少对我而言） .
Vuex Store
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;
Component ，在 <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 返回undedined？ . 您可以通过单击 Home 组件中的按钮来查看 . 我遵循官方Vuex指南中显示的相同模式：
https://vuex.vuejs.org/guide/getters.html#property-style-access
除非我错过了导入或 Vue.use() ，但引起我注意的是使用'mapGetters'实际上允许我将getter用作计算属性 . 您可以使用 About 组件中的按钮更改状态的name属性 .
1 回答
getter名称区分大小写 .
你有