作者:小土豆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\test\VueDemo\src\vuex\store.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\test\VueDemo\src\vuex\moduleA.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\test\VueDemo\src\vuex\moduleB.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\test\VueDemo\src\App.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\test\VueDemo\src\components\Index.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\test\VueDemo\src\components\Index.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\test\VueDemo\src\App.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\test\VueDemo\src\App.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\test\VueDemo\src\components\Index.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中的名称在映射过程中进行重命名)


  

Vuex实践(下)-mapState和mapGetters的更多相关文章

  1. vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用

    一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: ​ index.js如下: import Vue from 'vue'; import ...

  2. Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)

    这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex.原理详解.实战应用 @ 目录 1.getters的使用 1.1 概念 1.2 用法 1.3 如何读取数据 2.getters在项目中的实际 ...

  3. Vuex 实践讲解

    state 用来数据共享数据存储 mutation 用来注册改变数据状态 getters 用来对共享数据进行过滤操作 action 解决异步改变共享数据 这个四大特征就是核心,如何用怎么用 接下来还是 ...

  4. vuex 源码:深入 vuex 之辅助函数 mapState

    前言 当一个组件要获取多个 state 的时候,声明计算属性就会变得重复和冗余了.我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性. 所以我们得清楚,mapState 的作用就是帮 ...

  5. 记一次小团队Git实践(下)

    在上篇中,我们已经能基本使用git了,接下来继续更深入的挖掘一下git. 更多的配置自定义信息 除了前面讲的用户名和邮箱的配置,还可以自定义其他配置: # 自定义你喜欢的编辑器,可选 git conf ...

  6. vuex实践之路——笔记本应用(一)

    首先使用vue-cli把环境搭建好. 介绍一下应用的界面. App.vue根组件,就是整个应用的最外层 Toolbar.vue:最左边红色的区域,包括三个按钮,添加.收藏.删除. NoteList.v ...

  7. 大数据分析的下一代架构--IOTA架构设计实践[下]

    大数据分析的下一代架构--IOTA架构设计实践[下] 原创置顶 代立冬 发布于2018-12-31 20:59:53 阅读数 2151  收藏 展开 IOTA架构提出背景 大数据3.0时代以前,Lam ...

  8. 系统操作命令实践 下(系统指令+增删改查+vim编辑器)

    目录 1.考试 2.今日问题 3.今日内容 4.复制文件 4.移动文件 Linux文件查看补充 cat , nl 5.删除文件 6.系统别名 7.vi/vim编辑器 系统操作命令实践 下(系统指令+增 ...

  9. vuex mapState、mapGetters、mapActions、mapMutations的使用

    例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...

随机推荐

  1. ES6学习笔记第一天

    ## 三.const和let **3.1 const** const用来定义常量,所谓的常量就是值一旦给定后就不变,一次定义终身不变的量 const a = 10; a = 20; 上面的a就是一个常 ...

  2. 原生js实现多个随机大小颜色位置速度小球的碰壁反弹

    文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...

  3. H3C 帧中继显示与调试

  4. 怎么实现Web聊天

    如果你对web聊天这个事情没什么概念,那么最佳做法可能是:openfire+jsjac openfire是java做的开源xmpp服务器,jsjac是javascript做的开源的网页版xmpp客户端 ...

  5. C# 配置文件存储 各种序列化算法性能比较

    本文比较多个方式进行配置文件的存储,对比各个不同算法的读写性能. 在应用软件启动的时候,需要读取配置文件,但是启动的性能很重要,所以需要有一个很快的读取配置文件的方法. 如果你不想看过程,那么请看拖动 ...

  6. P1102 走迷宫二

    题目描述 大魔王抓住了爱丽丝,将她丢进了一口枯井中,并堵住了井口. 爱丽丝在井底发现了一张地图,他发现他现在身处一个迷宫当中,从地图中可以发现,迷宫是一个N*M的矩形,爱丽丝身处迷宫的左上角,唯一的出 ...

  7. 【u212】&&【t036】最大和

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] N个数围成一圈,要求从中选择若干个连续的数(注意每个数最多只能选一次)加起来,问能形成的最大的和. [ ...

  8. VC++ CMsflexgrid 使用

    引用actvie x :microsoft CMsflexgrid; BOOL CCalibrationCoordsDisDlg::OnInitDialog() { CDialog::OnInitDi ...

  9. poll 和 select 底层的数据结构

    poll 和 select 系统调用的真正实现是相当地简单, 对那些感兴趣于它如何工作的人; epoll 更加复杂一点但是建立在同样的机制上. 无论何时用户应用程序调用 poll, select, 或 ...

  10. 一排盒子,jq鼠标移入的盒子动画移出停止动画,css动画

    css .category > div.active { animation: servicetobig 0.5s ease 1 forwards; } @keyframes serviceto ...