vuex中(mapState、mapGetters、mapMutations、mapActions)使用方法以及如何使用这些方法映射指定modules中的数据、方法等等···

目录

一、vuex中4个map方法基本使用

二、vuex中4个map方法映射指定模块中的数据或方法

三、映射数据后并重新命名

---

一、vuex中4个map方法基本使用

<template>
  <div>
    <h1>当前计数器：{{ count }}</h1>
    <button @click="increase">累加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doneCount']),
  },
  methods: {
    ...mapActions(['updateCount']),
    ...mapMutations(['increase']),
  }
}
</script>

但是当我们需要使用模块中的方法或者数据时，需要添加模块去映射。

二、vuex中4个map方法映射指定模块中的数据或方法

<template>
  <div>
    <h1>当前计数器：{{ count }}</h1>
    <button @click="increase">累加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('counter',['count']),
    ...mapGetters('counter',['doneCount']),
  },
  methods: {
    ...mapActions('counter',['updateCount']),
    ...mapMutations('counter',['increase']),
  }
}
</script>

以上可以看到，如果需要隐射指定模块中的数据或方法时，前面加上模块名称即可。（map方法其实有两种映射方法，以上我只使用了数组方法映射）

三、映射数据后并重新命名

<template>
  <div>
    <h1>当前计数器：{{ curretCount }}</h1>
    <button @click="addCount">累加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('counter', { curretCount: 'count' }),
    ...mapGetters('counter', { doneCount: 'doneCount' }),
  },
  methods: {
    ...mapActions('counter', { updateCount: 'updateCount' }),
    ...mapMutations('counter', { addCount: 'increase' }),
  }
}
</script>

以上就是映射数据后并重新命名，如果不需要指定模块去掉即可。