Vuex 计算属性不更新 v-show

Posted 2023-02-22

【中文标题】Vuex 计算属性不更新 v-show

【英文标题】：Vuex computed property not updating 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 ......现在意识到它只是直接引用状态。

【参考方案1】：

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

import  mapState, mapGetters  from 'vuex'

// snip

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