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

问题描述

我希望组件对他从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,};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）