100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > mutations vuex 调用_Vuex中mutations和actions的区别

mutations vuex 调用_Vuex中mutations和actions的区别

时间:2019-11-19 05:33:51

相关推荐

mutations vuex 调用_Vuex中mutations和actions的区别

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数

const store = new Vuex.Store({

state: {

count: 1

},

mutations: {

increment (state) {

// 变更状态

state.count++

}

}

})

你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 mit 方法:

mit('increment')

Action Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。 让我们来注册一个简单的 action:

const store = new Vuex.Store({

state: {

count: 0

},

mutations: {

increment (state) {

state.count++

}

},

actions: {

increment (context) {

mit('increment')

}

}

})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 mit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时,你就知道 context 对象为什么不是 store 实例本身了。

实践中,我们会经常用到 ES 的 参数解构 来简化代码(特别是我们需要调用 commit 很多次的时候):

actions: {

increment ({ commit }) {

commit('increment')

}

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。