类别：vue / 日期：2023-04-02 / 浏览：432 / 评论：0
Mutation 必须是同步函数一条重要的原则就是要记住 mutation 必须是同步函数。为什么？请参考下面的例子：
mutations: {
someMutation (state) {
api.callAsyncMethod(() =>{ state.count++ })
}
}
现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
在组件中提交 Mutation 你可以在组件中使用 this.$store.commit('xxx') 提交mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为store.commit 调用（需要在根节点注入 store）。
import { mapMutations } from "vuex";
export default {
// ...
methods: {
...mapMutations([
"increment", // 将 `this.increment()` 映射为`this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
"incrementBy", // 将 `this.incrementBy(amount)` 映射为`this.$store.commit('incrementBy', amount)`,
]),
...mapMutations({
add: "increment", // 将 `this.add()` 映射为`this.$store.commit('increment')`,
}),
},
};
版权声明 : 本文未使用任何知识共享协议授权，您可以任何形式自由转载或使用。
发表评论 / 取消回复