Vue.js/Vuex:调用getter vs直接访问create生命周期钩子上的状态值
我使用vue.js中创建的生命周期挂钩将数据从存储区加载到vue组件的数据中。我注意到this.selectedType = store.state.selectedType成功地从存储区加载数据。但是，如果我使用getter从存储加载(即this.selectedType = store.getters.getType())，则会得到以下错误：
Error in created hook: "TypeError: Cannot read property 'selectedType' of undefined"
我不明白为什么它说selectedType是未定义的，因为selectedType在存储中有值"Item"，如果我使用this.selectedType = store.state.selectedType，它将正确加载到create上。
getter的定义如下：
getters: {
getSelectedType: state => {
return state.selectedType
}
}国家的定义是：
state: {
selectedType: "Item"
}有人能解释一下为什么会发生这种事吗？我的预感是生命周期中有一些我不完全理解的东西导致了这种混乱。
回答 1
Stack Overflow用户
发布于 2018-11-23 08:16:29
你不应该打电话给getter。就像计算的属性一样，您可以编写它，就像读取变量一样。在后台，使用状态、getter(可能还有rootState和rootGetters)调用Vuex存储中定义的函数，并返回一些值。
除此之外，使用生命周期挂钩初始化任何变量通常是一种反模式。局部' component‘变量可以在组件的data属性中初始化，而像vuex状态这样的东西通常以计算属性结束。
我要指出的最后一点是，如果您将存储正确地添加到您的Vue应用程序中，您可以使用this.$store访问任何组件中的存储。要在应用程序中使用getter，可以使用mapGetters助手将getter映射到组件属性。我建议使用这样的方法：
import { mapGetters } from 'vuex';
export default {
// Omitted some things here
computed: {
...mapGetters({
selectedType: 'getSelectedType'
})
},
methods: {
doSomething () {
console.log(this.selectedType);
}
}
}在功能上相当于：
computed: {
selectedType () {
return this.$store.getters.getSelectedType;
}
}https://stackoverflow.com/questions/53442505
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号