Vue: данные не меняются при использовании Vuex getter?

Question

У меня есть модальный компонент, который я запускал, когда разные компоненты изменяли поле triggerModalState. У меня в магазине Vuex есть геттер под названием getFulfillmentModalState. Модал выводится из локального поля данных, называемого dialog, которое я установил как значение геттера this.$store.getters.getFulfillmentModalState. Я проверяю значение this.$store.getters.getFulfillmentModalState, и оно составляет true после запуска модального режима, но данные dialog по-прежнему ложны. Что я тут не так делаю?

<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

dialog не реагирует в этом случае, потому что объявлено в data(). Переместите dialog в computed, чтобы сделать его реактивным:

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

демо