1. 全栈程序员必看首页

Vuex实践-mapState和mapGetters

全栈程序员-站长 • • 未分类 • 阅读 31

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传入一个数组

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • idea2021最新激活码【最新永久激活】 idea

    idea2021最新激活码【最新永久激活】

    (idea2021最新激活码)2021最新分享一个能用的的激活码出来，希望能帮到需要激活的朋友。目前这个是能用的，但是用的人多了之后也会失效，会不定时更新的，大家持续关注此网站~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码，破解教程可免费永久激活，亲测有效，上面是详细链接哦~Z9…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月22日
    105
  • word2vec原理总结

    word2vec原理总结

    word2vec原理总结CBOW与Skip-Gram模型基础：https://www.cnblogs.com/pinard/p/7160330.htmlHierarchicalSoftmax的模型：https://www.cnblogs.com/pinard/p/7243513.htmlNegativeSampling的模型：https://www.cnblogs.com/pinard/p/7249903.h…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月17日
    37
  • dedecms织梦首页如何调用文章列表？

    dedecms织梦首页如何调用文章列表？

    dedecms织梦首页如何调用文章列表？

    全栈程序员-站长的头像 全栈程序员-站长
    2021年9月21日
    44
  • SQL 分页查询 返回总条数

    SQL 分页查询 返回总条数

    SQL 分页查询 返回总条数分页查询返回总数SELECTSQL_CALC_FOUND_ROWS*FROMtbWHERExxxlimitM,N;SELECTFOUND_ROWS();

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月26日
    36
  • 顺丰科技QT面试题「建议收藏」 科技

    顺丰科技QT面试题「建议收藏」

    顺丰科技QT面试题「建议收藏」自定义控件：应该做过吧？能举几个例子吗？还有其他的吗？你觉得自定义控件的方法主要是哪些？答：从外观设计上：QSS、继承绘制函数重绘、继承QStyle相关类重绘、组合拼装等等从功能行为上：重写事件函数、添加或者修改信号和槽等等QSS:QSS平时使用的多吗？能举几个例子吗？都是如何使用，能说说吗？答：1.将QSS统一写在一个文件中，通过程序给主窗口加载；2.写成一个字符串中，通过程序给主窗口加载；3.需要使用的地方，写一个字符串，加载给对象；4.QTDesigner中填写；事件机制：

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月25日
    30
  • Java动态程序设计：反射介绍

    Java动态程序设计：反射介绍

    使用运行的类的信息使你的程序设计更加灵活反射授予了你的代码访问装载进JVM内的Java类的内部信息的权限，并且允许你编写在程序执行期间与所选择的类的一同工作的代码，而不是在源代码中。这种机制使得反射

    全栈程序员-站长的头像 全栈程序员-站长
    2021年12月24日
    40

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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