2

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

我已经开始为我的状态使用模块，但是在设置完所有内容之后，我可以看到 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,
  },
})

对话框.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 绑定并没有改变。

零件

开发工具商店

4

1 回答 1

1

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

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

于 2019-02-17T18:35:03.517 回答