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是 getter ，不是状态属性，因此您应使用mapGetters，例如

import { mapState, mapGetters } from 'vuex'

// snip

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

Vuex计算的属性不会更新v-show

1 个答案: