Vuejs中vuex的四个map方法二十

最新推荐文章于 2025-03-19 22:02:30 发布

米白蓝

最新推荐文章于 2025-03-19 22:02:30 发布

阅读量376

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_50563868/article/details/124510221

版权

Vuejs 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了在Vue.js中使用Vuex进行状态管理时，如何利用mapState、mapGetters、mapMutations和mapActions这四个方法简化代码。mapState帮助我们将state中的属性映射到计算属性，mapGetters用于映射getters中的处理后的数据。而mapMutations和mapActions则分别生成与mutations和actions交互的方法，需要注意它们需要接收参数。同时，getters提供了一种方式对state数据进行加工，返回处理后的结果，适用于多个组件共享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<--!Count.vue-->
<template>
  <div>
    <h2>当前的和为{{sum}}</h2>
    <h2>当前的和为{{bigSum}}</h2>
    <h2>我在{{school}}，遨游{{learn}}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前的和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState, mapGetters,mapMutations,mapActions} from 'vuex'
  export default {
    name: "Count",
    data() {
      return {
        n:1,
      }
    },
    computed: {
      // sum() {
      //   return this.$store.state.sum
      // },
      // school() {
      //   return this.$store.state.school
      // },
      // learn() {
      //   return this.$store.state.learn
      // },
      // ...mapState({sum:'sum',school:'school',learn:'learn'}),
      ...mapState(['sum','school','learn']),
      // bigSum() {
      //   return this.$store.getters.bigSum
      // }
      ...mapGetters(['bigSum'])

    },
    methods: {
      // increment() {
      //   this.$store.commit('JIA', this.n);
      // },
      // decrement() {
      //   this.$store.commit('JIAN', this.n);
      // },
      ...mapMutations({increment:'JIA',decrement:'JIAN'}),
      // ...mapMutations(['increment','decrement']),

      // incrementOdd() {
      //   this.$store.dispatch('jiaOdd', this.n);
      // },
      // incrementWait() {
      //   this.$store.dispatch('jiaWait', this.n);
      // },
      ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    }
  };
</script>

使用vuex中引入的mapState（import {mapState} from ‘vuex’）可以解决标签中{{}}语法里过长；使用：…mapState({he:‘sum’…})结构在computed中；
对应的有一个mapGetters；一个是映射state中数据为计算属性，一个是映射getters中数据为计算属性；
mapMutations：借助该方法生成对应的方法，方法中会调用commit去联系Mutations对话；
mapActions：生成与actions对话的方法；后两种方法需要在使用的地方传实参，否则参数就会是默认的e事件对象；

//vuex的getters方法
const getters = {
  bigSum(state) {
    return state.sum*10
  }
}

store中配置项getters：用于将state中的数据进行加工，和computed很像，但是可以多组件使用；
在里面写自己要写的方法，有一个参数，就是state，靠返回值来进行得到结果；