Vue JS：方法样式 Getter（过滤）和对 state 变化的反应

Question

我开发了一个简单的日程安排应用程序，我使用 Vuex 作为 state 经理。

我想要一种方法来过滤任务 state，只返回特定的日期和类别任务（Method Style Getter ig？）但我也希望获取这些任务的组件（通过 Method Style Getter）每次都做出反应（因此重新渲染）任务 state 更改。

到达那里最有效的方法是什么？

---

访问任务

export default {
  name: "TasksContainer",
  methods: {
    logSomething() {
      console.log("new task (good)");
    },
  },
  components: {
    Task,
  },
  computed: {
    ...mapGetters(["weekCourseTasks", "courseTasks", "nowMoment"]),
  },
};

更新任务

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

      this.$emit("new-task");
    },
  },
};

Answer 1

如果我理解正确的话，你会希望有任务，你可以根据日期和其他类别进行过滤。 Vuex 允许这样的 getter 方法。

以下代码块允许您根据参数编写 getter。

getters: {
// ...
  getTaskByDate: (state) => (date) => {
    return state.tasks.find(task => task.date === date)
  }
}

为了看到他们：

store.getters.getTaskByDate(xyz);

这应该允许您过滤 state 并使组件响应。

可以在此处的“方法样式访问”部分下找到完整的文档

此外，请务必根据指南执行更新以保持反应性。

由于 Vuex 商店的 state 被 Vue 响应，当我们改变 state 时，观察 state 的 Vue 组件将自动更新。 这也意味着 Vuex 突变在使用普通 Vue 时受到相同的反应性警告：

最好预先使用所有需要的字段初始化商店的初始 state。

向 Object 添加新属性时，您应该：

使用 Vue.set(obj, 'newProp', 123)，或者

将 Object 换成新的。 例如，使用 object 传播语法，我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

（来自 Vuex突变文档）