组件不通过方法样式获取器对状态更改做出反应

Question

我希望组件对他从Method-Style Getter获得的状态的变化做出反应，据我了解，它不是自动完成的，所以我考虑过从组件触发事件最初会更改状态，然后使用本地状态手动重新呈现数据。

（我需要从方法样式的Getter获取状态，因为我想对其进行过滤）

我不确定这样做是否正确。我想知道是否有更好的方法来应对这种状态的变化。

最初更改状态的组件

import { mapActions } from "vuex";

export default {
  name: "AddTask",
  data() {
    return {
      taskName: "",
      taskDetail: "",
      taskCourse: "",
      taskDate: "",
    };
  },
  methods: {
    ...mapActions(["addTask"]),
    postForm() {
    //here the state is changed
      this.addTask({
        taskName: this.taskName,
        taskDetail: this.taskDetail,
        taskCourse: this.taskCourse,
        taskDate: this.taskDate,
      });
    },
  },
};

主页组件

<template>
  <div class="home">
    <h1>Agenda</h1>
    <DatePicker />
    <!-- inside TasksGrid there is multipleTaskContainer -->
    <TasksGrid />
  </div>
</template>

任务存储模块

const state = {
  tasks: [],
  date: {},
};

const getters = {
  allTasks: (state) => {
    state.tasks;
  },
  courseTasks: (state) => (course) => {
    return state.tasks.filter((task) => {
      return task.course === course;
    });
  },
  weekCourseTasks: (state) => (course, momentObject) => {
    /// (...)
    return state.tasks.filter((task) => {
      return (
        task.course === course &&
        moment(task.dateFor).isBetween(weekStart, weekEnd)
      );
    });
  },
  nowMoment: (state) => {
    return state.date;
  },
};

const actions = {
  async fetchTasks({ commit }) {
    const fetchRes = await axios.get("http://localhost:5000/api/tasks");
    commit("setTasks", fetchRes.data);
  },
  async addTask({ commit }, taskObject) {
    console.log(taskObject);
    const newTask = await axios.post(
      "http://localhost:5000/api/tasks",
      taskObject
    );
    commit("addTask", newTask);
  },
  setDate({ commit }, momentObject) {
    commit("setDate", momentObject);
  },
};

const mutations = {
  setTasks: (state, newTasks) => {
    state.tasks = newTasks;
  },
  setDate: (state, newDate) => {
    state.date = newDate;
  },
  addTask: (state, newTask) => {
    console.log(state.tasks);
    state.tasks = [...state.tasks, newTask];
  },
};

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