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

这是商店中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 ，仅通过操作（异步）获取数据，然后使用通过突变获取数据的突变（同步）设置状态。作为有效载荷。

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

有一个出色的待办事项应用程序，您可以检查-我认为它的编写是为了让人们能够通过尝试重新创建VueJS（以及Vuex，Vuetify等）来了解很多内容。 {3}}

数据通常通过 compute 属性传递，您可以在其中返回 Vuex操作的结果。（https://github.com/davidgaroro/vuetify-todo-pwa）

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

1 个答案: