«Отправка» данных из хранилища vuex в компонент - PullRequest
Новая
       40

«Отправка» данных из хранилища vuex в компонент

0 голосов
/ 24 февраля 2019

Я пытаюсь изучить 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
    },

Спасибо за помощь!

1 Ответ

0 голосов
/ 25 февраля 2019

Корень проблемы в том, что вы используете действия для прямой модификации состояния.Если вы не хотите терять реактивность, вместо этого совершайте мутации.

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

Это означает, что вы не используете state в действии, только получить данные (асинхронно) с действием, а затем установить состояние (синхронно) с мутацией, которая получает данные из действия в качестве полезной нагрузки.

Если вы следуете шаблону, показанному впо ссылкам выше, полученные данные должны отображаться в вашем компоненте.

Есть отличное приложение todo , которое вы можете проверить - я думаю, оно написано так, чтобы можно было многое понять о VueJS (и Vuex, Vuetify и т. д.), просто пытаясь воссоздать то, что там есть: https://github.com/davidgaroro/vuetify-todo-pwa

Данные передаются через свойство computed (обычно), где вы возвращаете результаты акции Vuex.(https://vuejs.org/v2/guide/computed.html)

...