从 vuex 存储“发送”数据到组件

Question

我正在尝试学习 VueJS 和 Vuex，并且正在构建一个任务应用程序。我的组件结构如下：

主页

• 任务表

• 任务列表

• • 任务列表项

我通过任务表单添加任务，通过任务列表项组件删除任务。两者都工作正常！每个任务列表项旁边还有一个编辑按钮。当我单击它时，应用程序应该从数据库中加载任务详细信息并将其写入任务表单。我已成功将数据加载到商店中的相应任务对象中，但是我很难将这些数据交给任务表单组件中的“本地”任务项。该组件也用于创建任务，因此我正在尝试寻找解决方案以再次使用此表单进行更新。

所以总的来说，我试图将一个对象从存储任务对象传递给本地组件对象。 组件中的本地对象和存储任务组件都称为“任务”。我考虑过使用道具，但添加似乎不起作用，因为在添加/创建任务时对象未定义。

这就是我在任务列表项组件中调用更新的方式：

getTaskDetails (taskId) {
  this.$store.dispatch('getTaskDetails', taskId)
},

这是在商店中加载详细信息的操作：

   getTaskDetails ({ commit }, payload) {
      const task = {}
      db.collection('tasks').doc(payload).get().then(doc => {
        task.taskId = doc.id
        task.title = doc.data().title
        task.quadrant = doc.data().quadrant
        task.description = doc.data().description
        task.tags = doc.data().tags
        task.dueTimestamp = doc.data().dueDateAndTime
        task.reminderFlag = doc.data().reminderFlag
        task.urgencyFlag = doc.data().urgencyFlag
        task.importanceFlag = doc.data().importanceFlag
        // add isCompleted Flag
      }).then(() => {
        commit('GET_TASK_DETAILS', task)
        commit('SET_FORMMODE', 'update')
        commit('CHANGE_TASKFORM_VISIBILITY', true)
      }).catch(function (error) {
        commit('setError', error.message)
      })
    },

这是 store 中 state.task 的突变：

GET_TASK_DETAILS (state, payload) {
      var moment = require('moment')
      var date = new Date()
      date = this.state.task.dueTimestamp
      var s = moment(date).format('YYYY-MM-DD')
      var t = moment(date).format('HH:mm')
      state.task.dueDate = s
      state.datePicker = s
      state.task.dueTime = t
      state.timePicker = t
      state.task = payload
    },

感谢您的帮助！

Answer 1

问题的根源在于您正在使用操作来直接修改状态。如果您不想失去反应性，请改为提交突变。

https://vuex.vuejs.org/guide/mutations.html https://vuex.vuejs.org/guide/actions.html

这意味着您不在操作中使用 state，仅通过操作（异步）获取数据，然后通过从动作作为有效载荷。

如果您遵循上面链接中显示的模式，接收到的数据应该会显示在您的组件中。

有一个出色的 todo 应用程序可供您查看 - 我认为它的编写是为了让人们可以通过尝试重新创建那里的内容来了解​​很多关于 VueJS（以及 Vuex、Vuetify 等）的知识：@ 987654323@

数据通过 computed 属性（通常）传递，您可以在该属性中返回 Vuex 操作的结果。 (https://vuejs.org/v2/guide/computed.html)