目录

一、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>

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

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

如果觉得《vuex中(mapState mapGetters mapMutations mapActions)使用方法以及如何使用这些方》对你有帮助，请点赞、收藏，并留下你的观点哦！