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

Posted 2023-02-23

【中文标题】VueX 突变有效，但组件计算属性无效

【英文标题】：VueX mutation works, but component computed property doesn't

【发布时间】：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复制

【参考方案1】：

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

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

【讨论】：

遇到了同样的问题。谢谢