作者：小马铃薯biubiubiu

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

6HU网：juejin.im/user/58c61b…

简书：www.jianshu.com/u/cb1c3884e…

微信大众号：马铃薯妈的碎碎念（扫码重视，一同吸猫，一同听故事，一同学习前端技能）

码字不易，点赞鼓舞哟~

前言

本文章是Vuex系列的终究一篇，首要总结的是怎么运用mapState和mao P . c e V . L ApGetters拜访Vuex中的state和getters。

准备阶段

上一篇文章 [手把手式教程，合适新手入门Vu; L m ;ex]-Vuex入门实践（中） 里边咱们总结的是多模块的内容，所以关于store.js、moduleA.js和moduleB.] Z . f l Hjs的代码坚持不变。

在此为了便利观看，我将这三个文件的代码在贴在W a P ( Y 8 W Y F这儿。/ 2 n .

// E:MyStudytestVue* : q 4 XDemosrcvuexstore.js
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './moduleAW N M'
impoY ^ 8 8  P ] 1rt moduleB from './moduleB'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
counter: 1000
},
mutations: {
//递加
increase(sy 6 4tate) {
console.log("store-increase")
state.counter++
},
//递减
de- q H E = 6crement(state) {
state.counter# P u # D N G +--
}
},
actions: {
inx 2 I +creaseAction(context) {
setTimeout(function(){
//action经过提交mutatio` ~ rn改动同享数据状况
context.commit('increase');
},( Z S n p F :3000)
},
decremeu D 0 = H ntAction(context){
setTimeout(function(){
//action经过提交mutation改动同享数据状k F E况
context.commit('decrement');
},3000)
}
},
getters: {
doubleCounter(state) {
return state.counter*state.co4  7 aunter
}
},
modules: {
a: moduleA,
b: moduleB
}
})

// E:MyStudytestVueDemosrcvuexmoduleA.js
const moduleA = {
namespace% s K i { ad: true,
state:{
counter: 100
},
mutations: {
//递加
increase(state) {
console.log("moduleA-incB m u O xrease] C 7")
state.x ^ k f 1 ? *countm G 2 Mer++
},
//递减
decrement(state) {
stateh - m x H.counter--
}
},
actions: {
increaseAction(context) {
setTimeout(function(){
//action经过提交mutation改动同n , n / E A - ; .享数据状况
context.commit('increase');
},3000) E | g b L ; g 7
},
decrementAction(context){
setTimeout(function(){
/U 5 Z E/action经过提交mutation改动同享数据状况
context.commit(C * D 7'decrement');
},3000)
}
},
getters: {
doubleCounter(state) {
return s! E K % Ttate.counte_ _ z f ~ Mr*state.counter Z r
}
}
}
export default moduleN R l $ V AA

// E:MyStudytestVueDe4 X 6 3 O ? s e %moF b : csrcvuexmoduleB.js
const moduleB = {
namespaced: true,v S ? ? K V = $ R
state:{
coun* x & $ lter: 5
},
mutations: {
//递加
increase(state) {
consj & Z ( V l n Q Aole.log("moduleB-increase")
state.counter++
},
//递减
decrementAction(state) {
state.+ g B 3 , (counter--
}
},
action9 _ U ~ e 5 Gs: {
increaseAction(context) {
setTimeout(function(){
//a/ % f h M ^ sction经过- 8 D v提交mut- k = o 3 0 n )ation改动同享数据状况
conx ] j h U # z |text.commit('increase');( P V } y 5
},3000)
},
decrementAction(context){
setTimeout@ | ] s D k(function(){
//action经过提交mutation改动同享数据状况
context.commit('decrement');
},3000)
}
},
gette I  2 q Irs: {
doubleCounter(state){
return state.counter*state.counter
}
}
}
export default modX b l A YuleB

留意这儿不能短少指令空间的装备哦$ R @

现在需求在组件中运用mapSV N J L Q R ] Ptate、` w b B z D % 1mapGetters对st= % q d tate和getters进行拜访，仍是E W V ~ l I按照之前的套路:

在App.vz / z P 9 E M |ue组件中拜访store根模块、a模块的state和getters
在Index.vue组件中拜访b模块的state和getters

运用mapState

运用mapState拜访state的写法也有多种，咱们一个一个? F *来实践。

第O & C V f一种写法

咱们先直接上代码。

<: - ) 1 F n!-- E:MyStudytestVueDemosrcApp.$ 0  %  e S |vue&emsp;-->
<tO _ Q D @ j 5emplate>
&x : ? b C o H #lt;div id="app">
<img src="./assets/logo.png">
<!-- 获取同享数据 -->
<h11 p o q>这儿是App组件</h1>
<h3> App组件R A ^ n Z获取同享数据 </h3>
<h3>4 B G h I s运用mapState拜访根组件counter : {{counter}}</h3>
<h3>, Q @ N运用mapState拜访a组件counter : {{counterA}}</h3>
<hr/>
<Index></Index>
</div>
</template>
<scri4 v v Ipt>
import Index  from './components/Index'
import { mapState } from 'vuex'
export default {
name: 'App',
components: { Index },
cot m { )mputed: mapState({
//拜访store根模F ` l u :块
counter: function(staX . 8 F 2te){
return state.counter
},
//拜访a模块
counterA: function(stt ! ( l ,ate){
return state.a.counter
}
})
}
<d i d w h/script>
<style>
#app {
font-Q m 6 C S 0 l dfa4 F 2 Omily: 'Avenir', Helvetica, Arial, saO g Nns-serif;
-webkit-font-smoothing: antialia[ D l Ysed;
-moz-osx-font-smoothing: grayscaleq j e J j R  h @;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

<!-- E:MyStudyZ t [ k 8 ~ ] %testVuL { $ v _ P peDemosrccomponentsIndex.vue@ $ j W A L -->
<template>
<div>
<h1k f t u e X 2 - o>这儿是Index.vue组件</h1>
<h3>Index组件获取同享数据 </h3>
<h3>运用mapState拜访b| 3 8 . x 1模块counter ：{{ counterB }}</h3>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'Index',
computed: m9 a ; $ M - F {apState({
counterB: function(state){
return state.b.counter
}
})
}
</script>

在组件中运用mapState，首要第一步需求引进mapState。

import { mapState } from 'vuex'

接着就是在组件的核算特点computed运用m7 i & X e #apState，以Index组件中的代码为例。

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

能够看到mapSv s b Ltate关联到Vue的核算特点中。

获取b模块的state，只需求以Vue核算特点的方式在函数中返回state.6 d q } D ^ Ib.counter即可。（获取根模块state返回state.counterg 8 & s n d z g；获取a模块state返回state.a.counter）

这样在模板中就能够运用核算特点的语法拜访state。

第二种写法

第二种写法和第一种有些类似，只是以字符串的方式返回核算特点。

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

<!-- E:MyStudyte3 y Z & h *stVueDemosrccompoT I k + 2 ; 9nentsIndex.vue -->
<template>
<div>
<h1>这儿是Index.vue组件</h1>
<h3>Index组件获取同享数据 </h3>
<h3>运用mapState拜访b模块counter ：{{ counterB }}&j K ] 5 plt;/h3>
</div>
</templat! L O !e>
<9 u k - W O X;script>
import { mapState } from 'vuex'
export default {
name: 'Index',
computed: mapState('b',{
counterB: 'counter'
})
}
</sm A K O / f 7cript>

中心代v 8 x N %码如下:

c| G B 2 D %omputed: mapState(: & ^ s @ , 8 + b'b',{
c2 ? r UounterB: 'counter'
})

能够看到，这种写法mapState第一个参数限制了模块称号。接着就是以counter字符串的方式返回了b模块的counter值。那么咱们就能够知道拜访store跟模块、a模块的办法如下：

拜访根模块的数据，不需求限制第一 3 a ) @ ] o个参数
拜访a模块的数据，k . Q w需求限制第一个参数为a

接着就有个问题了：拜访store根模块、a模块的state代码d | 8 G } T同在App.vue组件中，那么C V t : [由于mapState第一个参数限制的问题，咱们需求编写两个mapState。

现在& – A 3 C直接上代码（只把coX x h p B [mputed中的中心代码贴B C m y D h N T l上）。  x p 4 j 3 / u

// E:o O ` &MyStudytestVueDemoL C ^ 0 I c !srcAppZ N G v.vue 
computed: {
...mapState({
//拜访store根模块
counter: 'co I J Wunter',
}),
...mapState('a',{
//拜访a模块
counterA: 'counter'
})
}m - F d D 1 k K E

能够看到，我写了两个mapState，仍是...mapState这L b v w i样的方式。

...mapState它是ES6中扩展运算符的语法，应用在mapState上，官方文档是这样O @ G [ 0 q说的:

若对此有疑问，能够在去仔细研究一下目标扩展运算符的内容

我这儿贴一个简单的示例

终a W I j究newObj的打印成果为  

信任这个示例能7 n m a @够很清楚的解说咱们写的两个...mapState的写法

官方文档处提到这个目标打开运算符的场景是为了将一个组0 x [ { ; ^ u =件中6 . @ ? 原本的核算特点# { L . :和mapState混合运用。

混合运用这个点日常开发会用到，很实用的一个点

终究咱们在运用浏览器检查一下终究App.vue和Index.vue中的成果。

留意：

这种关于mapState的写法不能删除mr G 5 m DoduleA和moduleB中关于指令空间的装备，否则会报错。

终究作者还测验了一个问题，就是将moduleA.js中的state特点改为counterA。

然后修改了AP P 2 $ b U 0 _pp.vue组件中compu- a & ( cted拜访a模块数据的代码

终究发现这样并不能正常拜访到a模块的state数据（删z 6 % ! r除a模: ) & @ o 6 z M }块的命名空间装备也无法正常拜访）

这个测验仅给咱们一个反面的示例，详细为什么不能拜访应该需求去阅读Vuex的源码才能知晓，因而这b d 0 h + q p儿不在探求。

运用mapGetters

前面运用mapStaL ~ f j c A ote拜访了state数据，那么现在咱们运用mapGetters拜访一下Vuex中的getters。

在测验之后1 H * c N $ o ^ V发现，暂+ k Q K时发现运用mapGetters拜访Vuex中的getters只需字符串的方式

<!-- E:MyStudytestVueDeb V U # g 5 A SmosrcApp.vue -->
<template>
<div id="app# ~ t G o t l } .">
<img src="z : 6 v F { c 3./assetsK X b % Z H/logo.png"&gT + e y 0t;
<!-- 获取同享数据 -->
<h1>这儿是App组件</h1>
<h3> App组件获取同享数据 </h3>
<h3>运用mapState拜访根组件counter : {{counter}}</h3&gR u E 8 Pt;
<h3>运用mapState拜访a组件counter : {{counterA}}</$ K ^ $ E i zh30 % A Z - d I E U&( ~ l 7 4 M  O *g` T + m W B Lt;
<h3>运用mapGetters拜访根组件doubleCounter : {{doubleCounter}}<7 U 2 G;/h3>
<h3>运用mapGetters拜访a组件doubleCounter : {{` l U ^doubleCounterA}}</h3>
<hr/>I , H 3;
<Index></Index>
</div>
</template>
<script>
import Index  from './componenK 3 _ + . Fts/Index'
import { mapState,mapGetters } from 'vuex? 5 z B P b F w 8'
export default {
name: 'App',F v ; # D A
co; % R l X j Y $ Hmponents: { Index },
computed: {
...mapState({
//拜访store根模块
counter: 'counter',
}),
...mapState('a',{
//拜访a模块
counterA& ) r ! k: 'counter'
}),
...mapGetters({
//拜访store根模块
doubleCounter: 'doubleCounter'
}),
...mapGetters('a',{
//拜访store根模块
doubleCounterA: 'doubleCounter'
})
}
}
</scriph 1 Zt>
<style>
#app {
font-family: 'A} I ; h  s { ~veniG F $ E Y d r jr', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: gra   w ~ayscalP B Xe;
text-al. , ( b [ E s J [ign: center;
color: #2c3e50;
margin-top: 60px[ r ( ~;
}
</style>

<!-- E:MyStudytestVueDemosrccomponentsIndex.vue -->
<template>
<div>
<h1>这儿是Index.vue组件</h1? 0 K M @ O>
<h3>Index组件获取同享数据 </h3>
<h3>运用mapState拜访b模块counter ：{{ counterB }}</h3>
<h3{ = _ h I ) ` I>运用mapGetters拜访b组件d? T H J T H G ]oubleCounter :v c h {{doubleCounterB}}&lz 1 r K 3 yt;/h3>
</div>
</template. J X >
<r 7 h F 7 j + Yscript>
import { mapState,mapGetters } from 'vuex'
export default {
name: 'Index',
computed: {
...mapState('b',{
c~ / 1 QounterB: 'counter'
}),
...mapGetters('b',{
doubleCounterB: 'doubleCounter'
}),
}
}
<g = 4 X K @ & 9 [;/script>

App组件中关于mapGetters的中心代码如下：

computed: {
...mapGetters({
//拜/ r O 3 G访sto1 F Y _ vre根模块
douB { w r y %bleCounter: 'doubleCounter'
}),
.) # V _ 9..ma! f ) YpGetters('a',{
//拜访s$ a ] ( 6 * rtore根模块
doubleCounterA: 'doubleCounter'
})
}

Index组件中关于mapGetters的中心代码如下：

computed: {
...mapGetters('b',{
doubleCounterB:; I 9 K X , A 'doublB )  = / j 6 } |eCounterg E + @ ] r'
}),
}

浏览器检查成果:

总结

到此本篇文章根本现已完毕了。

在终究呢，再弥补一点，不管是mapState和mapGetterY 0 _ . L Ks，咱们给传入的都是一个字典。

...mapState({
counter: 'counter',
}),+ N I s H c a j
...mapGetters({
doc e 3ubleCoua a b - lnter: 'doubleCounter'
}),

简单一些的，k * H T T 9 h ;假设# Y – g I y ~咱们的state和getters不重名，咱们能够给mapState和mapGetters传入一个数组。

mapState([
'counterA',L Z / b N E 8 u'counterB'，...
])
mapGetters([
'dobuleCounterA','dobuleCounterB'，...
])

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

字典方式相当所以将state和getters中的称号在映射过程中进行重命i [ W a名

Vuex入门实践系列文章总结

到此[手把手式教程，合适新e q 1手入门Vuex]-Vuex入门实践 这整个系列就完毕了，都是一些关于Vuex根底的用法，比较合适新手刚开始学习和实践Vuex。

终究呢，将这个系列的所有文章链接整理到这儿，便利咱们观看。

[手把手式教程，合适新手入C N | , 0 H p 7门VuexN K z @ 9 !]-Vuex入门实践（上）

[手把手式教程，合适新手入门Vuex]-Vuex入门实践（中）

[手把手式教程，合适新手= – a 9入门Vuex]-Vuex入门实践（下）

关于

作者

小马铃薯biubiubiu

一个努力学习的前端小a J M菜鸟，知识是无限的。深信只需不断下学习的脚步，总能抵达自f @ U J x [ e @ 7己希望的地方

同时仍是一个喜欢小猫咪的人，家里有一只美矮小母猫，名叫马铃薯

博客园

www.cnblogs.com/HouJiao/

掘/ i P Y金

juejin.im/user/58c61b…

简书

www.jianshu.com/u/cb1c3884e…

微信大众号

马铃薯妈的碎碎念

微信大众号的初衷是记录自己和身边的一些故事，同时? ( C s H c ~ q会不定期更新一些技能文章

欢迎咱们扫码重视，一同吸猫，一同听故事，一同学习前端技能

群聊

欢迎咱们扫描微信二维码进入群聊评论问题(若二维码失效可增加微信JEmbrace拉你进群)

作者寄语

小小总结，欢迎咱们辅导~