javascript - 在计算属性中使用 Vuex 状态打开模态，更改被忽略，模态保持关闭

Question

我有以下代码可以动态地将模态状态添加到 Vuex 存储并在整个应用程序中触发它们。即使状态发生变化，当我按下调度切换操作的按钮时，模式仍保持隐藏状态。 (组件使用quasar框架)

组件

<template>
  <q-dialog v-model="status" persistent>
    <q-card>
      <q-card-actions align="right">
        <q-btn flat label="Abbrechen" color="dark" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import modal from '../../mixins/modal'

  export default {
    name: 'DiscardSession',
    mixins: [modal]
  }
</script>

<style scoped>
</style>

混合

export default {
  beforeCreate () {
    console.log('define modal')
    this.$store.dispatch('modal/define', this.$options.name)
  },
  computed: {
    status: {
      get () {
        console.log('getter triggered')
        return this.$store.getters['modal/status'][this.$options.name]
      },
      set () {
        console.log('setter triggered')
        this.$store.dispatch('modal/toggle', this.$options.name)
      }
    }
  }
}

商店

export default {
  namespaced: true,
  state: {
    status: {}
  },
  getters: {
    status (state) {
      return state.status
    }
  },
  mutations: {
    DEFINE_STATUS (state, name) {
      state.status[name] = false
    },
    TOGGLE_STATUS (state, name) {
      state.status[name] = !state.status[name]
    }
  },
  actions: {
    define ({ commit, state}, name) {
      if (!(name in state.status)) commit('DEFINE_STATUS', name)
    },
    toggle ({ commit, state }, name) {
      commit('TOGGLE_STATUS', name)
    }
  }
}

Answer 1

这可能是 react 性问题。你能尝试下面的代码吗？

TOGGLE_STATUS (state, name) {
  state.status = {
    ...state.status,
    [name]: !state.status[name]
  }
}