vuex--学习笔记（二）在组件中如何获取vuex的state对象中的属性

前言：本文主要用于帮助笔者和新人理解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:

        }