Vue JS：方法样式获取程序用于过滤和对​​状态更改的反应性

编程问答 2022-08-13

问题描述

我在一个简单的时间表应用程序上工作，我使用Vuex作为状态管理器。

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

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

访问任务

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");
    },};

解决方法

如果我对您的理解正确，那么您希望有一些任务，可以根据日期和其他类别进行过滤。 Vuex允许使用这种吸气方法。

以下代码块允许您根据参数编写吸气剂。

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

为了看到它们：

store.getters.getTaskByDate(xyz);

这应该允许您过滤状态并使组件具有响应性。

here下的“方法样式访问”部分提供了完整的文档

此外，请务必按照准则执行更新以保持反应性。

由于Vue使Vuex存储的状态具有反应性，因此当我们更改 状态，观察状态的Vue组件将自动更新。 这也意味着Vuex突变具有相同的反应性 使用普通Vue时的警告：

建议使用所有需要的字段初始化商店的初始状态

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

使用Vue.set（obj，'newProp'，123）或

用一个新的对象替换该对象。例如，使用对象 传播语法，我们可以这样写：

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

（来自Vuex mutations documentation）

gettergettergetterjavascriptstatestatestatevue.js