Question

我在一个简单的时间表应用程序上工作，我使用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");
    },
  },
};

Answer 1

如果我对您的理解正确，那么您希望有一些任务，可以根据日期和其他类别进行过滤。 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）

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

1 个答案:

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

1 个答案:

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