未更新v的Vuex计算属性
未更新v的Vuex计算属性
提问于 2019-02-19 23:25:34
我有一个简单的Vuex模块，只有一个对象: selectedEvent。
我可以使用以下方法更新所选事件：
<Event :event="selectedEvent" />但是，我无法使用模块中定义的计算getter更新此属性的可见性：
<Event :event="selectedEvent" v-show="isEventSelected" />我在App.js中的计算值：
computed: mapState({
selectedEvent: state => state.events.selectedEvent,
isEventSelected: state => state.events.isEventSelected
})我知道Vue很难观察到一些对象/数组的变化，所以我在我的突变中使用了Vue.set。我还试图在事件组件中移动v-show，但没有成功。
如果我在v-show中移动getter逻辑，它可以正常工作(尽管它很混乱)，例如：
<Event :event="selectedEvent" v-show="selectedEvent.hasOwnProperty('id')" />
我对Vue很陌生-我在这里错过了什么？
store/modules/events.js:
import { EVENT_SELECT } from "./types";
import Vue from "vue";
const state = {
selectedEvent: {}
};
const getters = {
selectedEvent: state => {
return state.selectedEvent;
},
isEventSelected: state => {
return state.selectedEvent.hasOwnProperty("id");
}
};
const actions = {
setSelectedEvent({ commit }, selectedEvent) {
commit(EVENT_SELECT, selectedEvent);
}
};
const mutations = {
[EVENT_SELECT](state, selectedEvent) {
Vue.set(state, "selectedEvent", selectedEvent);
}
};
export default {
namespaced: true,
state,
getters,
actions,
mutations
};App.vue:
<template>
<div id="app">
<b-container>
<Calendar />
<Event :event="selectedEvent" v-show="selectedEvent.hasOwnProperty('id')"/>
</b-container>
</div>
</template>
<script>
import Calendar from "./components/Calendar.vue";
import Event from "./components/Event.vue";
import { mapState } from "vuex";
export default {
name: "app",
components: {
Calendar,
Event
},
computed: mapState({
selectedEvent: state => state.events.selectedEvent,
isEventSelected: state => state.events.isEventSelected
})
};
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-19 23:40:49
在您的商店中，isEventSelected是一个getter，而不是一个状态属性，所以您应该使用mapGetters，例如
import { mapState, mapGetters } from 'vuex'
// snip
computed: {
...mapState('events', ['selectedEvent']),
...mapGetters('events', ['isEventSelected'])
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54776478
复制相关文章
相似问题
腾讯云开发者
