>

selectedEvent라는 하나의 객체를 가진 간단한 Vuex 모듈이 있습니다.

다음을 사용하여 선택한 이벤트를 업데이트 할 수 있습니다 :

 <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 내부로 옮기면 다음과 같이 제대로 작동합니다 (그러나 지저분합니다).

<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

    가게에서 isEventSelected  상태 속성이 아닌getter이므로 mapGetters 를 사용해야합니다. 예 :

    import { mapState, mapGetters } from 'vuex'
    // snip
    computed: {
      ...mapState('events', ['selectedEvent']),
      ...mapGetters('events', ['isEventSelected'])
    }
    
    

관련 자료

  • 이전 html - 다단계 양식을 작성하는 방법
  • 다음 c# - JValue에서 JObject로 변환 할 수 없음