Vuex实践(下)-mapState和mapGetters
作者:小土豆biubiubiu
掘金:https://juejin.im/user/58c61b4361ff4b005d9e894d
简书:https://www.jianshu.com/u/cb1c3884e6d5
微信公众号:土豆妈的碎碎念(扫码关注,一起吸猫,一起听故事,一起学习前端技术)
码字不易,点赞鼓励哟~
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的更多相关文章
- vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用
一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: index.js如下: import Vue from 'vue'; import ...
- Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex.原理详解.实战应用 @ 目录 1.getters的使用 1.1 概念 1.2 用法 1.3 如何读取数据 2.getters在项目中的实际 ...
- Vuex 实践讲解
state 用来数据共享数据存储 mutation 用来注册改变数据状态 getters 用来对共享数据进行过滤操作 action 解决异步改变共享数据 这个四大特征就是核心,如何用怎么用 接下来还是 ...
- vuex 源码:深入 vuex 之辅助函数 mapState
前言 当一个组件要获取多个 state 的时候,声明计算属性就会变得重复和冗余了.我们可以使用到辅助函数 mapState 来更快更简洁地生成计算属性. 所以我们得清楚,mapState 的作用就是帮 ...
- 记一次小团队Git实践(下)
在上篇中,我们已经能基本使用git了,接下来继续更深入的挖掘一下git. 更多的配置自定义信息 除了前面讲的用户名和邮箱的配置,还可以自定义其他配置: # 自定义你喜欢的编辑器,可选 git conf ...
- vuex实践之路——笔记本应用(一)
首先使用vue-cli把环境搭建好. 介绍一下应用的界面. App.vue根组件,就是整个应用的最外层 Toolbar.vue:最左边红色的区域,包括三个按钮,添加.收藏.删除. NoteList.v ...
- 大数据分析的下一代架构--IOTA架构设计实践[下]
大数据分析的下一代架构--IOTA架构设计实践[下] 原创置顶 代立冬 发布于2018-12-31 20:59:53 阅读数 2151 收藏 展开 IOTA架构提出背景 大数据3.0时代以前,Lam ...
- 系统操作命令实践 下(系统指令+增删改查+vim编辑器)
目录 1.考试 2.今日问题 3.今日内容 4.复制文件 4.移动文件 Linux文件查看补充 cat , nl 5.删除文件 6.系统别名 7.vi/vim编辑器 系统操作命令实践 下(系统指令+增 ...
- vuex mapState、mapGetters、mapActions、mapMutations的使用
例子: index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' impor ...
随机推荐
- Mule自带例子之stockquote
1 配置效果图 2 配置文件 <?xml version="1.0" encoding="UTF-8"?> <mule version=&qu ...
- Python--day46--分组(看了别人博客掌握的)
原文链接:https://www.cnblogs.com/snsdzjlz320/p/5738226.html group by group by + group_concat() group by ...
- Python--day31--TCP的长链接
- H3C 静态路由配置
- H3C 端口接入控制方式
- navicat for mysql连接本地数据库
navicat for mysql连接本地数据库 打算使用navicat连接本地数据库,连接的时候,一直连接不上.然后猜想是不是本地数据库没有设置好.输入mysql,出错内容:access denie ...
- HDU 6444 Neko's loop(单调队列)
Neko has a loop of size nn. The loop has a happy value aiai on the i−th(0≤i≤n−1)i−th(0≤i≤n−1) grid. ...
- JS逻辑运算操作
非! 如果一个操作数是一个对象,返回false; 如果一个操作数是一个空字符串,返回true; 如果一个操作数是一个非空字符串,返回false; 如果一个操作数是一个数值0,返回true; 如果一个操 ...
- Servlet 常用类
Servlet 是一套标准的接口规范,当用户通过web请求来访问服务器时,由web容器根据配置调用我们实现的对应的servlet对象来提供服务.同时为了方便开发,servlet标准中也提供了许多常用的 ...
- Python3_函数参数传递、可变与不可变对象、变量作用域、函数返回值
参数传递: 在 python 中,类型属于对象,变量是没有类型的:(变量都仅仅是一个对象的引用,没有类型之分)a=[1,2,3] a="Runoob" 以上代码中,[1,2,3] ...