Вычисленное свойство Vuex не обновляет v-show

Question

У меня есть простой модуль Vuex с одним объектом: selectedEvent.

Я могу обновить выбранное событие, используя:

  <Event :event="selectedEvent" />

Однако я не могу обновить видимостьэто свойство с использованием вычисляемого геттера, определенного в модуле:

  <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 внутри компонента Event, но безуспешно.

Если я переместил логику получения в v-show, она работает нормально (хотя и запутанно), например:

<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>

Answer 1

В вашем магазине isEventSelected является добытчиком , а не государственной собственностью, поэтому вы должны использовать mapGetters, например

import { mapState, mapGetters } from 'vuex'

// snip

computed: {
  ...mapState('events', ['selectedEvent']),
  ...mapGetters('events', ['isEventSelected'])
}