vuex mutaton与actions的区别
事实上在 vuex 里面actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation就行。异步竞态怎么处理那是用户自己的事情。12345Vuex.Store({state,actions,mutation...
事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。
|
1 2 3 4 5 |
|
|
1 |
|
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。 个人觉得这个action的 产生就是 因为mutation 不能进行异步操作,如果有异步操作那么就用action 来提交mutation
|
1 2 3 4 5 6 7 8 9 10 11 |
|
在组件中提交 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')`
})
}
}
如果想要获取对应的状态你就可以直接使用this.$store.state获取,当然,也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去,如.
|
1 |
|
Action去comit一个mutation。它要指定去commit哪一个mutation,然后指定结束之后要做什么什么事情就要给出一个函数,所以说mutation的构成有两点名称和函数。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
action 异步操作
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
更多推荐



所有评论(0)