vuex的辅助函数：mapActions和mapMutations

最新推荐文章于 2024-08-11 21:51:07 发布
最新推荐文章于 2024-08-11 21:51:07 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： Vue2 文章标签： vuex mapActions mapMutations
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/124592855
版权
本文详细介绍了Vuex的辅助函数mapActions和mapMutations的使用，包括对象写法和数组写法。通过实例展示了如何在Count.vue组件中映射state、getters，并通过这两种方法调用actions和mutations。同时，针对使用过程中可能出现的问题，如参数传递，提出了相应的解决方案。最后，提供了修正后的代码示例。
摘要由CSDN通过智能技术生成

文章目录


本篇介绍vuex的辅助函数： mapActions和 mapMutations。

代码涉及两个文件，

  • store/index.js。本例中，该文件内容不发生变更。
  • Count.vue。本例中，该文件内容将发生多次变更，如
    • 辅助函数mapActions生成方法，方法中调用dispatch联系actions。
      • 对象写法
      • 数组写法
    • 辅助函数mapMutations生成方法，方法中调用commit联系mutations。
      • 对象写法
      • 数组写法

store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
    sum:0,
    company:"May技术无限公司",
    position:"FE"
};

const getters = {
    bigSum(state){
        return state.sum*10;
    }
}

const actions = {
    jiaOdd(context,value){
        if(context.state.sum  % 2){
            context.commit("JIA",value);
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit("JIA",value);
        },500)
    }

};
const mutations = {
    JIA(state,value){
        state.sum += value;
    },
    JIAN(state,value){
        state.sum -= value;
    }
};


export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

Count.vue

<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3>我在{{company}}上班，我的岗位是{{position}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">和为奇数时再加</button>
    <button @click="incrementWait"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["sum","company","position"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    increment(){
      this.$store.commit("JIA",this.num);
    },
    decrement(){  
      this.$store.commit("JIAN",this.num);
    },
    incrementOdd(){
      this.$store.dispatch("jiaOdd",this.num);
    },
    incrementWait(){
      this.$store.dispatch("jiaWait",this.num);
    }
  },
  mounted() {
    console.log("Count",this);
  }
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>
mapActions/mapMutations生成方法（对象写法）
<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3>我在{{company}}上班，我的岗位是{{position}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">和为奇数时再加</button>
    <button @click="incrementWait"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["sum","company","position"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    ...mapActions({
      incrementOdd:"jiaOdd",
      incrementWait:"jiaWait"
    }),
    ...mapMutations({
      increment:"JIA",
      decrement:"JIAN"
    })
  },
  mounted() {
    console.log("Count",this);
  }
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>

在这里插入图片描述
之所以出现上述问题，是因为$store.dispatch()或$store.commit()时传入了参数this.num，但使用mapActions或mapMutations生成方法时，事件处理方法中默认传入了事件对象作为参数。
对此，解决方法是，模板中将参数num传入事件处理函数，即<button @click="increment(num)"></button>。

以下Count.vue是ok的。

<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3>我在{{company}}上班，我的岗位是{{position}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">和为奇数时再加</button>
    <button @click="incrementWait(num)"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["sum","company","position"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    ...mapActions({
      incrementOdd:"jiaOdd",
      incrementWait:"jiaWait"
    }),
    ...mapMutations({
      increment:"JIA",
      decrement:"JIAN"
    })
  },
  mounted() {
    console.log("Count",this);
  }
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>
mapActions/mapMutations生成方法（数组写法）
<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <h2>当前求和放大10倍为{{bigSum}}</h2>
    <h3>我在{{company}}上班，我的岗位是{{position}}</h3>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="JIA(num)">+</button>
    <button @click="JIAN(num)">-</button>
    <button @click="jiaOdd(num)">和为奇数时再加</button>
    <button @click="jiaWait(num)"> 等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  computed:{
    ...mapState(["sum","company","position"]),
    ...mapGetters(["bigSum"])
  },
  methods: {
    ...mapActions(["jiaOdd","jiaWait"]),
    ...mapMutations(["JIA","JIAN"])
  },
  mounted() {
    console.log("Count",this);
  }
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>
richest_qi
关注
专栏目录
113_Vuex中的mapActions与mapMutations方法
述安的博客
12-06 302
mapActions方法用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数 mapMutations方法用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数 备注：mapActions与mapMutations使用时，若需要传递参数则需要在模板中绑定事件时传递好参数，否则默认参数是事件对象。 求和案例完整代码_mapActions与mapMutationsmain.jsstore文件夹下的index.jsApp.
vuex中的辅助方法（mapMutations/mapGetters/mapActions……）的记忆点
shinjie1210的博客
06-30 1311
无子路由store单独js文件情况 store数据编写 首先在store文件夹下index.js里写入几个mutation等数据备用 export default createStore({ state: { count:0, arr:[ {code:1,name:'1',status:true}, {code:2,name:'2',status:false}, {code:3,name:'3',status:true}, {code:4,name:'
vuex：弄懂mapState、mapGetters、mapMutations、mapActions
u010227042的博客
06-17 1778
vuex进阶 一、state 1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //存放状态 nickname:'Simba', age:20, gender:'男' }, mutations: {},
Vuex的mapState和mapMutations是什么？
最新发布
weixin_42381609的博客
08-11 339
注：这里的computed计算属性不采用直接赋值，也就是等于mapState(['属性名'])，而采用展开运算符，是为了不让一个mapState辅助函数就把computed配置项占满了，导致后面其他的计算属性配不了。而辅助函数mapState的底层逻辑是，帮忙自动生成了对应的computed计算属性，并通过展开运算符的方式直接在computed里面进行映射，所以页面就可以直接使用了。2）数组方式引入state：mapState( [ '属性名1'，'属性名2' ] )当前组件事件的方法名(参数){
【Vue】vuex mapActions和mapMutations
one or only的博客
07-21 407
【Vue】vuex mapActions和mapMutations
vuex中的mapActions与mapMutations(5)
Canace_Xyxjjcaw的博客
03-24 144
导入mapMutations 借用mapMutations生成的函数需要自己再传递一下参数 mapActions同理
vuex mapActions
weixin_34192993的博客
06-07 522
在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）. import Vue from 'vue'; import Element from 'element-ui' import 'element-ui/li...
vuex的语法糖-辅助函数mapState , mapMutations , mapActions , mapGetters
@baby张~的博客
04-03 4728
还不知道vue中vuex如何使用？点击下面链接 链接:简单demo详细讲解 复习vuex工作原理 事件调用 dispatchstate修改 render重新渲染commit一个type类型匹配对应type操作state客户端ActionStateMutation vuex五大核心 1.State 2.Getters 3.Mutations 4.Actions 5.Module 我们项目中需要的都...
vuex-demo:vuex中mapState、mapGetters、mapActions、mapMutations的使用
05-02
在这个"vuex-demo"项目中，我们将重点探讨Vuex中的四个核心辅助函数：`mapState`、`mapGetters`、`mapActions`和`mapMutations`，它们极大地简化了Vuex与Vue组件之间的交互。 1. **mapState** `mapState`是一个辅助...
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
08-27
使用这些概念，Vuex提供了`mapState`、`mapGetters`、`mapActions`和`mapMutations`辅助函数，它们帮助开发者便捷地在组件中绑定和调用这些状态和方法。例如，`mapState`可以让组件直接绑定到store中的状态，而`...
Vuex 4源码学习笔记 - mapState、mapGetters、mapActions、mapMutations辅助函数原理（六）
小帅的编程笔记
11-24 1338
在上一篇笔记中：Vuex 4源码学习笔记 - 通过dispatch一步步来掌握Vuex整个数据流（五） 我们通过dispatch的调用，一步步的看到Vuex的内部工作流程，这也是看源码的最好的方式，只要捋清楚大概主流程后，再去看那些细枝末节就容易多了。 今天我们就来看看这几个Vuex的辅助函数，分别为mapState、mapGetters、mapActions、mapMutations、createNamespacedHelpers，从名字看到，它们是辅助函数，意思就是，不用它们我们也可以使用Vuex，使用
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
12-09
在微信小程序开发中，开发者常会遇到一个问题：在使用mpvue和vuex的组合时，vuex的辅助函数如mapState、mapGetters、mapMutations和mapActions无法正常工作。这个问题主要是由于mpvue框架与vue-cli + vuex项目的集成...
vue vuex mapActions
虾米大王的学习历程
09-04 98
【代码】vue vuex mapActions。
Vue2：Vuex中使用mapMutations和mapActions
Brave_heart4pzj的博客
02-18 672
Vue
vuex的使用之mapActions
热门推荐
weixin_44794123的博客
06-09 1万+
vuex中mapActions的使用
vuex—4辅助函数mapState、mapActions
jiaojsun的博客
06-08 324
先回忆一下store 再回忆一下组件 使用辅助函数后
mapMutations辅助函数
爱学习的小强
09-17 77
图解
VUEX中关于 mapActions, mapMutations使用解析
weixin_33898233的博客
06-07 3709
在项目中，经常使用到VUEX状态管理，对于小项目中，直接使用 this.$store.commit('mutaion-name','参数') 或者 this.$store.dispatch('actions-name','参数')上述两种方法即可。但是，当项目中的 mutation 或者 action 过多的时候，这样一个个的写就显得比较麻烦。所以，vue提供了 mapActions和mapMu...
Vue88-Vuex中的mapActions、mapMutations
qq_31532983的博客
07-04 209
Vuex中的mapActions、mapMutations的调用
vuex里面的辅助函数mapState,mapGetters,mapMutations和mapActions用法
07-10
mapMutations: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 mutation 方法。它也接受一个数组或对象作为参数，用于指定我们想要映射的 mutation 方法。不同于`mapState`和`mapGetters`，`mapMutations`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值