Vuex实践（下）-mapState和mapGetters

作者：小土豆biubiubiu

博客园：www.cnblogs.com/HouJiao/

掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d

简书：https://www.jianshu.com/u/cb1c3884e6d5

微信公众号：土豆妈的碎碎念（扫码关注，一起吸猫，一起听故事，一起学习前端技术）

码字不易，点赞鼓励哟~

　　

　　Vuex系列文章

　　　　《Vuex实践（上）》

　　　　《Vuex实践（中）-多module中的state、mutations、actions和getters》

　　　　《Vuex实践（下）-mapState和mapGetters》

　　

一.前言

　　本文章是vuex系列的最后一篇，主要总结的是如何使用mapState和mapGetters访问vuex中的state和getters。

二.多个模块中mapState和mapGetters的使用

　　上一篇文章《Vuex实践（中）》里面我们总结的就是多模块的内容，所以关于store.js、moduleA.js和moduleB.js的代码保持不变。

　　在此为了方便观看，我将这三个文件的代码在贴在这里

E:MyStudy estVueDemosrcvuexstore.js

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './moduleA'
import moduleB from './moduleB'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        counter: 1000
    },
    mutations: {
        //递增
        increase(state) {
            console.log("store-increase")
            state.counter++
        },
        //递减
        decrement(state) {
            state.counter--
        }
    },
    actions: {
        increaseAction(context) {
            setTimeout(function(){
                //action通过提交mutation改变共享数据状态
                context.commit('increase');
            },3000)
        },
        decrementAction(context){
            setTimeout(function(){
                //action通过提交mutation改变共享数据状态
                context.commit('decrement');
            },3000)
        }
    },
    getters: {
        doubleCounter(state) {
            return state.counter*state.counter
        }
    },
    modules: {
        a: moduleA,
        b: moduleB
    }
})

E:MyStudy estVueDemosrcvuexmoduleA.js

const moduleA = {
    namespaced: true,
    state:{
        counter: 100
    },
    mutations: {
        //递增
        increase(state) {
            console.log("moduleA-increase")
            state.counter++
        },
        //递减
        decrement(state) {
            state.counter--
        }
    },
    actions: {
        increaseAction(context) {
            setTimeout(function(){
                //action通过提交mutation改变共享数据状态
                context.commit('increase');
            },3000)
        },
        decrementAction(context){
            setTimeout(function(){
                //action通过提交mutation改变共享数据状态
                context.commit('decrement');
            },3000)
        }
    },
    getters: {
        doubleCounter(state) {
            return state.counter*state.counter
        }
    }
}

export default moduleA

E:MyStudy estVueDemosrcvuexmoduleB.js

const moduleB = {
    namespaced: true,
    state:{
        counter: 5
    },
    mutations: {
        //递增
        increase(state) {
            console.log("moduleB-increase")
            state.counter++
        },
        //递减
        decrementAction(state) {
            state.counter--
        }
    },
    actions: {
        increaseAction(context) {
            setTimeout(function(){
                //action通过提交mutation改变共享数据状态
                context.commit('increase');
            },3000)
        },
        decrementAction(context){
            setTimeout(function(){
                //action通过提交mutation改变共享数据状态
                context.commit('decrement');
            },3000)
        }
    },
    getters: {
        doubleCounter(state){
            return state.counter*state.counter
        }
    }
}

export default moduleB

　　现在需要在组件中使用mapState和mapGetters

　　还是按照之前的套路

　　在App.vue组件中访问根根模块store和a模块moduleA的state和getters。

　　在Index.vue组件中访问b模块moduleB的state和getters

1.使用mapState

　　使用mapState访问state的写法也有多种，我们一个一个来实践（不包含es6的写法）

　　[第一种写法]

E:MyStudy estVueDemosrcApp.vue　　

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 获取共享数据 -->
    <h1>这里是App组件</h1>
    <h3> App组件获取共享数据 </h3>
    <h3>使用mapState访问根组件counter : {{counter}}</h3>
    <h3>使用mapState访问a组件counter : {{counterA}}</h3>
    <hr/>
    <Index></Index>
  </div>
</template>

<script>
import Index  from './components/Index'
import { mapState } from 'vuex'
export default {
  name: 'App',
  components: { Index },
  computed: mapState({
    //访问store根模块
    counter: function(state){
      return state.counter
    },
    //访问a模块
    counterA: function(state){
      return state.a.counter
    }
  })
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

E:MyStudy estVueDemosrccomponentsIndex.vue

<template>
    <div>  
        <h1>这里是Index.vue组件</h1>
        <h3>Index组件获取共享数据 </h3>
        <h3>使用mapState访问b模块counter ：{{ counterB }}</h3>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name: 'Index',
    computed: mapState({
        counterB: function(state){
            return state.b.counter
        }
    })
}
</script>

　　在App.vue、Index.vue组件中使用mapState，首先第一步需要引入mapState。

　　接着就是在计算属性computed中使用，以Index.vue中的代码为例

computed: mapState({
    counterB: function(state){
         return state.b.counter
    }
})

 　   可以看到mapState关联到vue的计算属性中。

　　获取b模块的state，只需要以vue计算属性的形式在函数中返回state.b.counter即可。

　 （获取根模块state返回state.counter；获取a模块state返回state.a.counter）

　　这样在模板中就可以使用计算属性的语法访问state

　　备注：这种方式，当注释掉命名空间的配置后，依然可以正常访问到不同模块的state

　　[第二种写法]

　　第二种写法和第一种有些类似，只是以字符串的形式返回计算属性。

　　我们先在Index.vue组件中访问b模块的数据。

E:MyStudy estVueDemosrccomponentsIndex.vue

<template>
    <div>  
        <h1>这里是Index.vue组件</h1>
        <h3>Index组件获取共享数据 </h3>
        <h3>使用mapState访问b模块counter ：{{ counterB }}</h3>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name: 'Index',
    computed: mapState('b',{
        counterB: 'counter'
    })
}
</script>

　　核心代码如下

computed: mapState('b',{
    counterB: 'counter'
})

 　  可以看到，mapState第一个参数限定了模块名称。

　　接着就是以'counter'字符串的形式返回了b模块的counter值。

　　那么根据之前一系列的总结，可知

　　　　访问根模块的数据，不需要限定第一个参数；

　　　　访问a模块的数据，需要限定第一个参数为a

　　然而，因为访问根模块和访问a模块同在App.vue组件中，那么因为mapState第一个参数限定的问题，我们需要编写两个mapState。

　　现在直接上代码（只把computed中的核心代码贴上）

E:MyStudy estVueDemosrcApp.vue　　

computed: {
    ...mapState({
      //访问store根模块
      counter: 'counter',
    }),
    ...mapState('a',{
      //访问a模块
      counterA: 'counter'
    })
}

　　可以看到，我写了两个mapState，还是...mapState的形式。

　　...mapState它是ES6中扩展运算符的语法，应用在mapState上，官方文档是这样说的

　　

 　 （

　　　　此处若对此有疑问，可以在去仔细研究一下对象扩展运算符的内容。

　　　　我这里贴一个简单的示例

　　　　

 　　　  最终newObj的打印结果为　　

　　　　相信这个示例可以很清楚的解释我们写的两个...mapState的写法

　　）

　　官方文档处提到这个对象展开运算符的场景是为了将一个组件中原本的计算属性和mapState混合使用

　　（混合使用这个点日常开发会用到，很实用的一个点）。

　　那本次我们也是使用这个语法成功的获取到了不同模块的state。

　　最后我们在使用浏览器查看一下最终App.vue和Index.vue中的结果

　　

　　我们已经使用mapState成功的访问到了多模块中的state数据。

　

　　备注：这种关于mapState的写法不能删除moduleA和moduleB中关于命令空间的配置，否则会报错。

　　最后作者还尝试了一个问题，就是将moduleA.js中的state属性改为counterA

　　

　　然后修改了App.vue组件中computed访问a模块数据的代码

　　

　　最后发现这样并不能正常访问到a模块的state数据。（删除a模块的命名空间配置也无法正常访问）

　　这个尝试仅给大家一个反面的示例。

2.使用mapGetters

　　前面使用mapState访问了state数据，那么现在我们使用mapGetters访问一下vuex中的getters。

　　在研究之后发现，暂时发现使用mapGetters访问一下vuex中的getters只有字符串的形式。

E:MyStudy estVueDemosrcApp.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 获取共享数据 -->
    <h1>这里是App组件</h1>
    <h3> App组件获取共享数据 </h3>
    <h3>使用mapState访问根组件counter : {{counter}}</h3>
    <h3>使用mapState访问a组件counter : {{counterA}}</h3>
    <h3>使用mapGetters访问根组件doubleCounter : {{doubleCounter}}</h3>
    <h3>使用mapGetters访问a组件doubleCounter : {{doubleCounterA}}</h3>
    <hr/>
    <Index></Index>
  </div>
</template>

<script>
import Index  from './components/Index'
import { mapState,mapGetters } from 'vuex'
export default {
  name: 'App',
  components: { Index },
  computed: {
    ...mapState({
      //访问store根模块
      counter: 'counter',
    }),
    ...mapState('a',{
      //访问a模块
      counterA: 'counter'
    }),
    ...mapGetters({
      //访问store根模块
      doubleCounter: 'doubleCounter'
    }),
    ...mapGetters('a',{
      //访问store根模块
      doubleCounterA: 'doubleCounter'
    })

  }
  
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

E:MyStudy estVueDemosrccomponentsIndex.vue

<template>
    <div>  
        <h1>这里是Index.vue组件</h1>
        <h3>Index组件获取共享数据 </h3>
        <h3>使用mapState访问b模块counter ：{{ counterB }}</h3>
        <h3>使用mapGetters访问b组件doubleCounter : {{doubleCounterB}}</h3>
    </div>
</template>
<script>
import { mapState,mapGetters } from 'vuex'
export default {
    name: 'Index',
    computed: {
        ...mapState('b',{
            counterB: 'counter'
         }),
        ...mapGetters('b',{
            doubleCounterB: 'doubleCounter'
        }),
    }
}
</script>

　　浏览器查看结果

　　

三.总结

　　到此本篇文章基本已经结束了，vuex系列的三篇文章也已经结束。

　　关于vuex中大多数的用法基本已经覆盖到，但是还有一些内容没有覆盖到。

　　后期攒够一篇在继续更新

　　在最后呢，再补充一点，不管是mapState和mapGetters，我们给传入的都是一个字典。

　　简单一些的，假如我们的state和getters不重名，我们可以给mapState和mapGetters传入一个数组

mapState([
     'counterA','counterB'，...
])

mapGetters([
     'dobuleCounterA','dobuleCounterB'，...
])

　　这样数组中的字符串元素会直接去映射对应的state和getters。

　　（字典形式相当于是将state和getters中的名称在映射过程中进行重命名）

---