本文章是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.jsimport Vue from'vue'import Vuex from'vuex'import moduleA from'./moduleAW N M'impoY ^ 8 8 P ] 1rt moduleB from'./moduleB'
Vue.use(Vuex)
exportdefaultnew 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.jsconst 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
}
}
}
exportdefault moduleN R l $ V AA
// E:MyStudytestVueDe4 X 6 3 O ? s e %moF b : csrcvuexmoduleB.jsconst moduleB = {
namespaced: true,v S ? ? K V = $ Rstate:{
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
}
}
}
exportdefault 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 --><tO _ Q D @ j 5emplate>&x : ? b C o H #lt;divid="app"><imgsrc="./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'exportdefault {
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'exportdefault {
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组件中的代码为例。
获取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'exportdefault {
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'
})
接着就有个问题了：拜访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><divid="app# ~ t G o t l } ."><imgsrc="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'exportdefault {
name: 'App',F v ; # D Aco; % 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'exportdefault {
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'，...
])
