VueX 변환은 작동하지만 구성 요소 계산 속성이 작동하지 않음

VueX 변환은 작동하지만 구성 요소 계산 속성이 작동하지 않음

저는 이 문제에 관한 많은 질문과 답변을 읽었지만, 이전에 설명한 문제들은 전혀 하고 있지 않은 것 같습니다.

모듈을 사용하여 상태를 변경했습니다만, 모든 것을 셋업 하면 스토어 모듈과 getter의 로컬 상태가 모두 갱신되는 것을 알 수 있습니다.하지만 계산된 속성은 그렇지 않습니다.도대체 왜 이런 일이 일어나는지 알 수가 없어서 도움을 청하고 있어요.

index.displaces를 표시합니다.

import Vue from 'vue'
import Vuex from 'vuex'
import base_states from './modules/base_states'
import dialogs from './modules/dialogs'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    base_states,
    dialogs,
  },
})

대화 상자js

// initial state
const state = {
  signInModalDialogComponent: 'signOn',
  attendanceModalDialogComponent: 'AttendanceDetails',
  dialogSignInVisible: false,
  dialogDonationVisible: false,
}

// getters
const getters = {
  signInModalDialogComponent: state => state.signInModalDialogComponent,
  attendanceModalDialogComponent: state => state.attendanceModalDialogComponent,
  dialogSignInVisible: state => state.dialogSignInVisible,
  dialogDonationVisible: state => state.dialogDonationVisible,
}

// actions
const actions = {}

// mutations
const mutations = {
  changeComponent(state, data){
    state.signInModalDialogComponent = data
  },
  changeAttendanceComponent(state, componentName){
    state.attendanceModalDialogComponent = componentName
  },
  toggleSignInVisibility(state, data){
    state.dialogSignInVisible = data
  },
  changeDonationVisibility(state, data){
    state.dialogDonationVisible = data
  },
}

export default {
  state,
  getters,
  actions,
  mutations
}

component (관련되지 않은 코드 묶음을 제거했습니다)

<template lang="pug">
...
    el-dialog(width='300px', :visible.sync='dialogSignInVisible')
      component(
        :is='signInModalDialogComponent',
        @componentchanged='dialogComponent = $event'
      )
</template>

<script type="text/javascript">
  import { mapGetters, mapMutations } from 'vuex';
  export default {
    computed: {
      ...mapGetters([
        'dialogSignInVisible',
        'signInModalDialogComponent',
      ]),
    },
    methods: {
      ...mapMutations([
        'toggleSignInVisibility'
      ]),
    }
  }
</script>

특히, 저는 지금dialogSignInVisible그건 변하지 않아요.개발 도구에서 알 수 있듯이 변환이 통과하여 로컬 상태와 getter를 모두 변경합니다.그러나 구성 요소를 살펴봐도 계산된 vuex 바인딩은 변경되지 않습니다.

문제는 스토어와 웹 팩 팩에서 다른 Vue 실행 파일을 사용하고 있다는 것입니다.

사용하고 있다import Vue from 'vue/dist/vue.esm'어디에나 있지만store나는 사용했다import Vue from 'vue'같은 것을 확인한 결과, 모든 것이 문제없이 동작했습니다.

언급URL : https://stackoverflow.com/questions/54620394/vuex-mutation-works-but-component-computed-property-doesnt