Vue JS :方法风格Getter (到过滤)和状态变化的反应性
Vue JS :方法风格Getter (到过滤)和状态变化的反应性
提问于 2020-08-31 05:41:09
我开发了一个简单的日程安排应用程序，并使用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");
},
},
};回答 1
Stack Overflow用户
发布于 2020-08-31 07:01:42
如果我理解正确的话，您希望有任务，您可以根据日期和其他类别进行过滤。Vuex允许这样的getter方法。
下面的代码块允许您编写基于参数的getter。
getters: {
// ...
getTaskByDate: (state) => (date) => {
return state.tasks.find(task => task.date === date)
}
}为了查看它们：
store.getters.getTaskByDate(xyz);这应该允许您过滤您的状态，并使组件响应。
完整的文档可以在“方法样式访问”部分的here中找到。
此外，请确保根据指南执行更新，以保持反应性。
由于Vue使Vue商店的状态成为响应式，当我们改变状态时，观察状态的Vue组件将自动更新。这也意味着Vuex突变在使用普通Vue时受到相同的反应性警告：
我更喜欢用所有需要的字段预先初始化你的商店的初始状态。
向对象添加新特性时，应执行以下任一操作：
使用Vue.set(obj，'newProp'，123)，或者
用新的对象替换该对象。例如，使用对象扩展语法，我们可以这样写它：
state.obj = { ...state.obj, newProp: 123 }(来自Vuex mutations documentation)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63662411
复制相关文章
相似问题
腾讯云开发者
