Vuex 计算属性不更新 v-show答案

【问题标题】：Vuex computed property not updating v-showVuex 计算属性不更新 v-show
【发布时间】：2019-07-13 13:27:26
【问题描述】：

我有一个带有一个对象的简单 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 无法观察到一些 Object/Array 的变化，所以我在我的突变中使用了Vue.set。我还尝试在 Event 组件中移动 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>

【问题讨论】：

为什么你有一个名为selectedEvent 的getter 只返回state.selectedEvent？
@Phil 我用它作为引用状态对象的简写。不确定这是否是个好主意，我更喜欢写
在您的组件中使用computed 属性很好，我的意思是在您的商店中您有一个state 属性selectedEvent 和一个getter 也命名为@ 987654333@ 除了返回 state 属性之外什么都不做。 getter 完全是多余的
@Phil 你是对的 - 这完全没有必要。我认为 mapState 出于某种原因正在使用我的 getter ......现在意识到它只是直接引用状态。

标签： javascript vue.js vuex

【解决方案1】：

在您的商店中，isEventSelected 是 getter，而不是状态属性，因此您应该使用 mapGetters，例如

import { mapState, mapGetters } from 'vuex'

// snip

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

【讨论】：