VueX 突变有效，但组件计算属性无效答案

【问题标题】：VueX mutation works, but component computed property doesn'tVueX 突变有效，但组件计算属性无效
【发布时间】：2019-07-04 08:20:17
【问题描述】：

我已经阅读了很多关于这个问题的问题和答案，但我似乎没有做之前描述的任何问题。

我已经开始为我的状态使用模块，但是在设置完所有内容后，我可以看到 store 模块的本地状态和 getter 都得到了更新。但是计算的属性没有。我不知道为什么会发生这种情况，所以我在这里寻求帮助。

index.js

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,
  },
})

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
}

组件（我拿出一堆代码，不相关）

<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，它不会改变。正如您从开发工具中看到的那样，突变会同时改变本地状态和吸气剂。但是当我查看组件时，计算出的 vuex 绑定并没有改变。

【问题讨论】：

toggleSignInVisibility 在哪里调用？尝试从:visible.sync='dialogSignInVisible' 中删除sync。
@OrkhanAlikhanov 它在上面被调用，来自@click="toggleSignInVisibility(true)" 的按钮单击。如前所述，它正确更新了商店中的状态...删除sync 没有任何作用
在这种情况下无法弄清楚。尝试在jsfiddle.net中重现
我已经重置并使用了 mapGetters 和 mapMutations 与我以前的全球商店，它工作得很好。正如怀疑的那样，让我觉得我没有正确使用模块。我会尝试用jsfiddle.net复制

标签： vue.js vuex vuex-modules

【解决方案1】：

问题是我在我的商店和我的 webpack 包中使用了不同的 Vue 可执行文件。

我在任何地方都使用import Vue from 'vue/dist/vue.esm'，但在store 中我使用了import Vue from 'vue'。在确保它们相同后，一切正常。

【讨论】：

遇到了同样的问题。谢谢