1. 全栈程序员必看首页

Vuex实践-mapState和mapGetters

全栈程序员-用户IM • • 未分类

Vuex实践-mapState和mapGetters一.前言　　本文章是vuex系列的最后一篇，主要总结的是如何使用mapState和mapGetters访问vuex中的state和getters。二.多个模块中mapState和mapGetters的使用　　上一篇文章《Vuex实践（中）》里面我们总结的就是多模块的内容，所以关于store.js、moduleA.js和moduleB.js的代码保持不变。　　在此为了方便观看，我将这…

大家好，又见面了，我是你们的朋友全栈君。

一.前言

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

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

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

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

E:\MyStudy\test\VueDemo\src\vuex\store.js

复制代码

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 import moduleA from './moduleA'
 4 import moduleB from './moduleB'
 5 
 6 Vue.use(Vuex)
 7 
 8 export default new Vuex.Store({
 9     state: {
10         counter: 1000
11     },
12     mutations: {
13         //递增
14         increase(state) {
15             console.log("store-increase")
16             state.counter++
17         },
18         //递减
19         decrement(state) {
20             state.counter--
21         }
22     },
23     actions: {
24         increaseAction(context) {
25             setTimeout(function(){
26                 //action通过提交mutation改变共享数据状态
27                 context.commit('increase');
28             },3000)
29         },
30         decrementAction(context){
31             setTimeout(function(){
32                 //action通过提交mutation改变共享数据状态
33                 context.commit('decrement');
34             },3000)
35         }
36     },
37     getters: {
38         doubleCounter(state) {
39             return state.counter*state.counter
40         }
41     },
42     modules: {
43         a: moduleA,
44         b: moduleB
45     }
46 })

复制代码

 

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

复制代码

 1 const moduleB = {
 2     namespaced: true,
 3     state:{
 4         counter: 5
 5     },
 6     mutations: {
 7         //递增
 8         increase(state) {
 9             console.log("moduleB-increase")
10             state.counter++
11         },
12         //递减
13         decrementAction(state) {
14             state.counter--
15         }
16     },
17     actions: {
18         increaseAction(context) {
19             setTimeout(function(){
20                 //action通过提交mutation改变共享数据状态
21                 context.commit('increase');
22             },3000)
23         },
24         decrementAction(context){
25             setTimeout(function(){
26                 //action通过提交mutation改变共享数据状态
27                 context.commit('decrement');
28             },3000)
29         }
30     },
31     getters: {
32         doubleCounter(state){
33             return state.counter*state.counter
34         }
35     }
36 }
37 
38 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中的代码为例

1

2

3

4

5

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

复制代码

 1 <template>
 2     <div>  
 3         <h1>这里是Index.vue组件</h1>
 4         <h3>Index组件获取共享数据 </h3>
 5         <h3>使用mapState访问b模块counter ：{
 
 { counterB }}</h3>
 6     </div>
 7 </template>
 8 <script>
 9 import { mapState } from 'vuex'
10 export default {
11     name: 'Index',
12     computed: mapState('b',{
13         counterB: 'counter'
14     })
15 }
16 </script>

复制代码

　　核心代码如下

1

2

3

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上，官方文档是这样说的

　　Vuex实践-mapState和mapGetters

 　 （

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

　　　　我这里贴一个简单的示例

　　　　Vuex实践-mapState和mapGetters

 　　　  最终newObj的打印结果为Vuex实践-mapState和mapGetters　　

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

　　）

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

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

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

 

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

　　Vuex实践-mapState和mapGetters

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

　

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

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

　　Vuex实践-mapState和mapGetters

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

　　Vuex实践-mapState和mapGetters

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

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

2.使用mapGetters

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

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

E:\MyStudy\test\VueDemo\src\App.vue

复制代码

 1 <template>
 2   <div id="app">
 3     <img src="./assets/logo.png">
 4     <!-- 获取共享数据 -->
 5     <h1>这里是App组件</h1>
 6     <h3> App组件获取共享数据 </h3>
 7     <h3>使用mapState访问根组件counter : {
 
 {counter}}</h3>
 8     <h3>使用mapState访问a组件counter : {
 
 {counterA}}</h3>
 9     <h3>使用mapGetters访问根组件doubleCounter : {
 
 {doubleCounter}}</h3>
10     <h3>使用mapGetters访问a组件doubleCounter : {
 
 {doubleCounterA}}</h3>
11     <hr/>
12     <Index></Index>
13   </div>
14 </template>
15 
16 <script>
17 import Index  from './components/Index'
18 import { mapState,mapGetters } from 'vuex'
19 export default {
20   name: 'App',
21   components: { Index },
22   computed: {
23     ...mapState({
24       //访问store根模块
25       counter: 'counter',
26     }),
27     ...mapState('a',{
28       //访问a模块
29       counterA: 'counter'
30     }),
31     ...mapGetters({
32       //访问store根模块
33       doubleCounter: 'doubleCounter'
34     }),
35     ...mapGetters('a',{
36       //访问store根模块
37       doubleCounterA: 'doubleCounter'
38     })
39 
40   }
41   
42 }
43 </script>
44 
45 <style>
46 #app {
47   font-family: 'Avenir', Helvetica, Arial, sans-serif;
48   -webkit-font-smoothing: antialiased;
49   -moz-osx-font-smoothing: grayscale;
50   text-align: center;
51   color: #2c3e50;
52   margin-top: 60px;
53 }
54 </style>

复制代码

 

E:\MyStudy\test\VueDemo\src\components\Index.vue

复制代码

 1 <template>
 2     <div>  
 3         <h1>这里是Index.vue组件</h1>
 4         <h3>Index组件获取共享数据 </h3>
 5         <h3>使用mapState访问b模块counter ：{
 
 { counterB }}</h3>
 6         <h3>使用mapGetters访问b组件doubleCounter : {
 
 {doubleCounterB}}</h3>
 7     </div>
 8 </template>
 9 <script>
10 import { mapState,mapGetters } from 'vuex'
11 export default {
12     name: 'Index',
13     computed: {
14         ...mapState('b',{
15             counterB: 'counter'
16          }),
17         ...mapGetters('b',{
18             doubleCounterB: 'doubleCounter'
19         }),
20     }
21 }
22 </script>

复制代码

 

　　浏览器查看结果

　　Vuex实践-mapState和mapGetters

三.总结

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

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

　　后期攒够一篇在继续更新

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/135513.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0


相关推荐

  • 云服务器和虚拟主机的区别

    云服务器和虚拟主机的区别

    云服务器和虚拟主机的区别云服务器和虚拟主机的区别：1、技术原理：云服务器是基于庞大的服务器资源池，是在一组集群主机上虚拟出多个类似独立主机的部分，集群中每个主机上都有云服务器的一个镜像；虚拟主机是服务器划分出的一部分，因此也叫做虚拟空间，在服务器当中划分出一定的磁盘空间放置web程序组件，提供数据的存放和传输功能。2、可用资源：云服务器是独享资源，具有独立的CPU、内存、硬盘和ip等；虚拟主机则是众多网站空间共享一台物理服务器的资源。3、主机费用：由于虚拟主机是多个空间分享一台服务器的带宽、IP等资源，费用低廉，价格比云服

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月25日
  • qq浏览器手动屏蔽广告_qq好友屏蔽你的特征

    qq浏览器手动屏蔽广告_qq好友屏蔽你的特征

    qq浏览器手动屏蔽广告_qq好友屏蔽你的特征现在很多软件的免费版都是有广告的，这让原本清清爽爽的界面变得乱七八糟，QQ虽然没有收费版，但是也要开了会员才能去广告。那不开会员如何屏蔽QQ广告呢？早在QQ2009Beta版的时候，可以通过删除一些文件让非会员也能实现去广告的目的，可惜从QQ2009正式版起增加了文件完整性检查，删除文件会导致QQ无法启动，并且要求重新安装。这里要介绍的方法，其实只要你对Windows操

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月10日
  • 单点登录说明(单点登录流程)

    单点登录说明(单点登录流程)

    　　什么是单点登录？单点登录全称SingleSignOn（以下简称SSO），是指在多系统应用群中登录一个系统，便可在其他所有系统中得到授权而无需再次登录，包括单点登录与单点注销两部分1、登录　　相比于单系统登录，sso需要一个独立的认证中心，只有认证中心能接受用户的用户名密码等安全信息，其他系统不提供登录入口，只接受认证中心的间接授权。间接授权通过令牌实现，sso认证中心验证用户的用户…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月14日
  • Android debug_Android开发在手机上调试

    Android debug_Android开发在手机上调试

    Android debug_Android开发在手机上调试AndroidStudio目前已经成为开发Android的主要工具，用熟了可谓相当顺手。作为开发者，调试并发现bug，进而解决，可是我们的看家本领。正所谓，工欲善其事必先利其器，和其他开发工具一样，如Eclipse、Idea，AndroidStudio也为我们提供了强大的调试技巧，今天我们就来看看AndroidStudio中有关调试的技巧。首先，来看看Androidstudio中为我们…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月15日
  • bug生命周期的状态

    bug生命周期的状态

    bug生命周期的状态从一个bug被发现到这个bug被关闭这一段时间，bug可能会有以下状态：new，openPostpone，PendingRetest，Retest,PendingReject,Reject,Deferred,closed.(请注意这里有很多种状态，我们需要根据不同情况来决定怎样或者是否需要跟开发人员沟通)　　下面就对这几种状态进行以下解释：　　New:（新的）　　当

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月8日
  • linux查看文件和目录

    linux查看文件和目录

    linux查看文件和目录linux查看文件和目录

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月24日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号