Я хочу обновить состояние моего компонента при изменении состояния vuex

Question

Это мой модуль задач, который я использую в магазине.В этом моя функция showTaskInForm () работает отлично.Я вижу, как задача появляется в state.task через инструменты vue dev

const state = {
   tasks: []   // array of objects
   task: null
}

const getters = {
    task: state => state.task
};

const actions = {
    showTaskInForm({ commit, state }, taskId) {
       const task = state.tasks.filter(task => task.id === taskId);
       const taskToEdit = task.length === 1 && task[0];
       commit('showTaskInForm', taskToEdit);
   }
};

const mutations = {
      showTaskInForm: (state, taskToEdit) => (state.task = taskToEdit)
 }

export default {
    state,
    getters,
    actions,
    mutations
};

И это мой компонент AddTask.vue

import { mapActions, mapGetters } from "vuex";

export default {
  name: "AddTask",
  data() {
    return {
      taskName    : this.task ? this.task.name        : null,
      description : this.task ? this.task.description : null,
   };
  },
  computed: mapGetters(['task']),
};

Как я уже упоминал ранее, я вижу состояние.задача в vuex заполняется, но в моем компоненте AddTask.vue мне нужно сделать это, если в vuex есть задача, поэтому мои поля формы получают значение state.task.

Помогите мне, пожалуйста, я новичок вVue.js.

Answer 1

Объект, возвращаемый функцией данных в компоненте AddTask, оценивается только один раз, когда создается экземпляр компонента.Это означает, что ваши выражения для taskName и description не будут оцениваться в течение жизненного цикла объекта.

Вам необходимо смоделировать taskName и description как вычисленные свойства, чтобы третичный оператор оценивался после изменения зависимости(в вашем случае значение задачи, поступающей из магазина).

import { mapActions, mapGetters } from "vuex";

export default {
  name: "AddTask",
  computed: {
    ...mapGetters(['task']),
    taskName() { 
      return this.task ? this.task.name : null
    },
    description() { 
      return this.task ? this.task.description : null
    }
};