前端：一篇彻底搞懂vuex中dispatch与commit的使用及差异

文章目录

简介
1. 在Vue组件中提交 mutation
2. 对象风格提交mutation
3. 展开运算符+mapMutations辅助函数（...mapMutations）
4. Action 异步变更状态
5. 展开运算符+mapActions 辅助函数（...mapActions ）

简介

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

1. 在Vue组件中提交 mutation

代码: index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);// Vuex 的状态存储是响应式的// 创建一个Vuex.Store的实例
const store = new Vuex.Store({// 存储状态state: {count: 0},// mutation中最多有两个参数，第一个参数为state，要传多个参数，可传递一个对象mutations: {// 类型为 increment 的 mutationincrement (state) {// 变更状态state.count++;},// 类型为 reduce 的 mutationreduce (state, n) {// 变更状态state.count -= n;},// 类型为 change 的 mutation,第二个参数为一个对象change (state, payload) {// 变更状态state.count = state.count + payload.a + payload.b;}}
});export default store;

代码testState.vue

<template><div class="hello"><button @click="add">加1</button><button @click="reduce">减2</button><button @click="change">change</button><h1>{{ count }}</h1></div>
</template><script>import { mapState } from 'vuex';export default {data () {return {};},computed: {...mapState(['count'])},methods: {add () {// 以相应的 type 调用 store.commit 方法this.$store.commit('increment');console.log(this.$store.state.count);},reduce () {// 可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）this.$store.commit('reduce', 2);},change () {// 注意：只可以向 store.commit 传入额外的一个参数// 如果要传多个参数，就传一个对象作为参数，即大多数情况下，载荷应是一个对象this.$store.commit('change', {a: 4, b: 6});}}};
</script>

2. 对象风格提交mutation

提交 mutation 的另一种方式是直接使用包含 type 属性的对象
当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数

代码testvue.vue


<template><div class="hello"><button @click="add">加1</button><button @click="reduce">减2</button><button @click="change">change</button><h1>{{ count }}</h1></div>
</template><script>
import { mapState } from 'vuex';export default {data () {return {};},computed: {...mapState(['count'])},methods: {add () {// 以相应的 type 调用 store.commit 方法this.$store.commit({type: 'increment'});},reduce () {// 这种没法改用对象风格提交mutation// 因为第二个参数必须是对象才能使用对象风格提交mutationthis.$store.commit('reduce', 2);},change () {this.$store.commit({type: 'change',a: 4,b: 6});}}};
</script>

3. 展开运算符+mapMutations辅助函数（…mapMutations）

代码testvue.vue

<template><div class="hello"><button @click="increment">加1</button><button @click="reduce(2)">减2</button><button @click="change({a:4, b:6})">change</button><h1>{{ count }}</h1></div>
</template><script>
// 导入mapState和mapMutations函数
import { mapState, mapMutations } from 'vuex';export default {data () {return {};},computed: {...mapState(['count'])},methods: {// 展开运算符+mapMutations辅助函数...mapMutations(['increment', 'reduce', 'change'])}
};
</script>

4. Action 异步变更状态

代码testvue.vue

// 创建一个Vuex.Store的实例
const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++;}},// 异步变更状态，Action 提交的也是 mutation// Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象// Action调用 context.commit 提交一个 mutation// Action通过 context.state 和 context.getters 获取 state 和 getters。actions: {increment (context) {context.commit('increment');}}
});

在组件中使用actions，在组件中使用actions和在组建中使用mutations类似
区别就是，mutations使用this.$store.commit(‘mutation方法名’)提交mutation；

actions使用this.$store.dispatch(‘action方法名’)分发action

代码testvue.vue

<template><div><button @click="increment">加1</button><h1>{{ count }}</h1></div>
</template><script>import { mapState } from 'vuex';export default {data () {return {};},computed: {...mapState(['count'])},methods: {increment () {return this.$store.dispatch('increment');}}};
</script>

5. 展开运算符+mapActions 辅助函数（…mapActions ）

代码testvue.vue

<template><div><button @click="increment">加1</button><h1>{{ count }}</h1></div>
</template><script>// 导入mapActions函数import { mapState, mapActions } from 'vuex';export default {data () {return {};},computed: {...mapState(['count'])},methods: {// 展开运算符+mapActions辅助函数...mapActions(['increment'])}};
</script>

前端：一篇彻底搞懂vuex中dispatch与commit的使用及差异相关推荐

前端:一篇彻底搞懂vuex (mapState、mapGetters、mapMutations、mapActions)
文章目录一.state 1.1 state使用 1.2 mapState 辅助函数二.getters 2.1 getters的使用三.Mutation 3.1 mutations的使用 3.2 ...
这一篇彻底搞懂JS中的prototype、__proto__与constructor真的很好
文章目录 1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结提示:不要排斥,静下心来,认真读完,你就搞懂了!(可以先看一下 ...
【Vue系列】vuex详解，一篇彻底搞懂vuex
目录 1. 理解vuex 1.1 vuex是什么 1.2 什么是状态管理模式 1.3 什么时候用vuex 1.4 vuex工作原理 2. 应用vuex 2.1 安装vuex 2.2 搭建vuex环境 ...
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
帮你彻底搞懂JS中的prototype.__proto__与constructor(图解) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文 ...
（转）帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
文章目录 1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结提示:不要排斥,静下心来,认真读完,你就搞懂了!(可以先看一下 ...
java 自旋锁_搞懂Java中的自旋锁
轻松搞懂Java中的自旋锁前言在之前的文章<一文彻底搞懂面试中常问的各种"锁">中介绍了Java中的各种"锁",可能对于不是很了解这些概念的同学 ...
一文搞懂Qt中的颜色渐变(QGradient Class)
一文搞懂Qt中的颜色渐变(QGradient Class) 1, 快速开始! Qt中与颜色渐变有关的类是QGradient 其中它又有三个子类:QLinearGradient.QRadialGradi ...
彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...
一文搞懂产品中的搜索设计
搜索功能是我们日常生活中接触最多的功能之一,它更够很好的提高用户使用产品的效率,用户对搜索功能的依赖性也比较大,所以设计好搜索功能将会很大程度上提高用户体验.本文作者通过分享这篇文章,帮我们搞懂产品中 ...
来一轮带注释的demo，彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...

前端：一篇彻底搞懂vuex中dispatch与commit的使用及差异

文章目录

简介

1. 在Vue组件中提交 mutation

2. 对象风格提交mutation

3. 展开运算符+mapMutations辅助函数（…mapMutations）

4. Action 异步变更状态

5. 展开运算符+mapActions 辅助函数（…mapActions ）

前端：一篇彻底搞懂vuex中dispatch与commit的使用及差异相关推荐

最新文章

热门文章