Javascript 使用computed属性中的Vuex状态打开模态，将忽略更改，模态保持关闭

我有以下代码来动态地将模态状态添加到Vuex存储中，并触发它们以破坏整个应用程序。即使状态发生变化，当我按下一个按钮分派切换动作时，模式仍保持隐藏状态。（使用组件的类星体框架）

组成部分

<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>

贮藏

---

这可能是一个反应性问题。你能试试下面的代码吗

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

---

谢谢你的作品！由于我对Vue和Vuex比较陌生，您能解释一下吗？基本上，如果您使用

state.status[name]=…

，那么

state.status

仍然指向旧的引用。它需要指向一个新的参考，以使vuex具有反应性。这就是为什么我将它分配给新对象

state.status={…}

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)
    }
  }
}

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