前言:本文主要用于帮助笔者和新人理解vuex的使用,因个人能力有限,有什么建议可以留言一起探讨。

这里,我首先想说明的是:

一切都是语法糖,如果在实际应用中,你有什么地方不太了解,那只是对某个语法糖不太了解而已!因此,要多看,多学,最重要的,是多实践!自己多敲几遍代码,也就熟悉了

接上文:vuex--学习笔记(一)初识

在上文中,我们实际上已经接触过一种在组件中获取vuex的state对象中属性的方法,即在插值表达式中用$store.state.count来获取,这里再回顾下,见下图:


而在实际应用中,还存在着其他一些写法,最常见的有以下三种,但无论怎么写,都需要依赖vue的computed计算属性来实现

因为:在vue的实际应用中,computed属性可以在输出前,对data中的值进行改变,因此,我们就是利用computed的这一特性,在组件中获取vuex的state对象中的属性。

方法一:

computed中定义一个方法,并return出state对象中的属性及其状态:


这里需要说明的是:因为store之前已经在mian.js中进行了全局引入(见上文),因此,在vue的组件中,就可以使用this.$store来调用,其中this代表Vue的实例(不可省略)。


方法二:

利用vuex的mapState方法来获取vuex的state对象中属性,它有两种写法:

写法1(mapState中用对象的形式获取):

首先在组件中引入vuex的mapState方法:

import { mapState } from 'vuex'

然后在computed中这样写:

        computed:{
            ...mapState({
                count:state => state.count   
//使用ES6的箭头函数来给count赋值
            })

        }



写法2(mapState中用数组的形式获取):

同样,需要先在组件中引入vuex的mapState方法:

import { mapState } from 'vuex'

然后在computed中这样写:

        computed:

            ...mapState(['count'])

        }

以上就是在组件中获取vuex的state对象中属性的几种常见方法,小伙伴你看懂了吗?欢迎留言共同探讨~
Logo

前往低代码交流专区

更多推荐