Vue：数据不会随着Vuex getter而改变？

Question

我有一个模态组件，当不同的组件突变triggerModalState字段时，我被触发。我有一个getter在我的Vuex商店叫getFulfillmentModalState。模态被从称为对话框的本地数据栏中驱动出来，我已经将其设置为getterthis的值。$store.getters.getFulfillmentModalState。我正在检查this.$store.getters.getFulfillmentModalState的值，并且在我触发modal之后它是true，但是对话框数据仍然是false。我到底做错了什么？

<template>
    <div class="fulfillment-modal-component">
        <v-row justify="center">
            <v-dialog v-model="dialog" persistent max-width="290">
                <v-card>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="rgba(53, 87, 151, 0.85)" text @click="changeModalState(true)">Cancel</v-btn>
                        <v-btn color="rgba(53, 87, 151, 0.85)" text @click="changeModalState(false)">Continue</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-row>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import store from './../../store/store';

    export default {
        name: 'fulfillment-modal',

        mounted() {

        },

        data() {
            return {
                dialog: this.$store.getters.getFulfillmentModalState
            }
        },
    }
</script>

Answer 1

在这种情况下，对话框不是被动的，因为它是在data（）中声明的。将对话框移动到计算，使其成为反应式对话框：

//...
export default {
  data() {
    return {
      //dialog: /*..*/   // move to computed
    }
  },
  computed: {
    dialog() {
      return this.$store.getters.getFulfillmentModalState
    }
  }
}

演示