在Vuex中,同时拥有“动作”和“突变”的逻辑是什么?
我理解组件不能修改状态的逻辑(这看起来很聪明),但同时拥有动作和突变似乎是在编写一个函数来触发另一个函数,然后再改变状态。
“动作”和“突变”之间的区别是什么,它们是如何一起工作的,更重要的是,我很好奇Vuex开发人员为什么决定这样做?
在Vuex中,同时拥有“动作”和“突变”的逻辑是什么?
我理解组件不能修改状态的逻辑(这看起来很聪明),但同时拥有动作和突变似乎是在编写一个函数来触发另一个函数,然后再改变状态。
“动作”和“突变”之间的区别是什么,它们是如何一起工作的,更重要的是,我很好奇Vuex开发人员为什么决定这样做?
当前回答
我认为TLDR的答案是,突变意味着同步/事务性的。因此,如果您需要运行Ajax调用,或执行任何其他异步代码,则需要在Action中执行该操作,然后提交一个突变,以设置新状态。
其他回答
我认为TLDR的答案是,突变意味着同步/事务性的。因此,如果您需要运行Ajax调用,或执行任何其他异步代码,则需要在Action中执行该操作,然后提交一个突变,以设置新状态。
突变是同步的,而操作可以是异步的。
换句话说:如果您的操作是同步的,则不需要操作,否则就实现它们。
基因突变:
Can update the state. (Having the Authorization to change the state).
行动:
Actions are used to tell "which mutation should be triggered"
用Redux的方式
突变是减速器 行动就是行动
为什么都是??
当应用程序增长时,代码和行数将会增加,这时你必须在Actions中处理逻辑,而不是在突变中,因为突变是改变状态的唯一权威,它应该尽可能干净。
问题1:Vuejs的开发者为什么决定这样做?
答:
当您的应用程序变得很大,并且有多个开发人员在这个项目上工作时,您会发现“状态管理”(特别是“全局状态”)变得越来越复杂。 Vuex方式(就像react.js中的Redux一样)提供了一种新的机制来管理状态、保持状态和“保存和跟踪”(这意味着每个修改状态的操作都可以被调试工具vue-devtools跟踪)
问题2:“action”和“mutation”有什么区别?
让我们先看看官方的解释:
Mutations: Vuex mutations are essentially events: each mutation has a name and a handler. import Vuex from 'vuex' const store = new Vuex.Store({ state: { count: 1 }, mutations: { INCREMENT (state) { // mutate state state.count++ } } }) Actions: Actions are just functions that dispatch mutations. // the simplest action function increment ({commit}) { commit('INCREMENT') } // a action with additional arguments // with ES2015 argument destructuring function incrementBy ({ dispatch }, amount) { dispatch('INCREMENT', amount) }
以下是我对上述问题的解释:
突变是改变状态的唯一方法 突变并不关心业务逻辑,它只关心“状态” 操作是业务逻辑 动作一次可以提交多个突变,它只实现业务逻辑,不关心数据更改(由突变管理)
1.从文档:
动作类似于突变,区别在于:
操作不会导致状态突变,而是导致突变。 动作可以包含任意异步操作。
action可以包含异步操作,但是突变不能。
2.我们调用突变,就能直接改变状态。我们也可以这样改变状态:
actions: {
increment (store) {
// do whatever ... then change the state
store.commit('MUTATION_NAME')
}
}
action是为处理更多其他事情而设计的,我们可以在那里做很多事情(我们可以使用异步操作),然后通过调度突变来改变状态。