Vuex从入门到实战笔记---黑马

一、Vuex的概述

1.回顾–组件之间共享数据的方式

（仅适合在小范围内实现数据共享）
父向子传值：v-bind属性绑定
子向父传值：v-on 事件绑定
兄弟组件之间共享数据：EventBus
$on:接收数据的那个组件
$emit:发送数据的那个组件

2.Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

没有使用 Vuex时 想要实现数据的分享 需要将值传到附近的组件中
使用Vued时 实现数据共享 只需要将组件中的值传到store 其他组件可以从store中进行数据的调用

3.使用Vuex统一管理状态的好处

①能够在vuex中集中管理共享的数据，易于开发和后期维护
②能够高效地实现组件之间的数据共享，提高开发效率
③存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步

4.什么样的数据适合存储在Vuex中

一般情况下，只有组件之间共享的数据，才有必要存储在vuex中，对于组件中私有数据，依旧存储在组件自身的data中即可

二、Vuex的基本使用

三、Vuex核心概念

• State
• Mutations
• Actions
• Gettters

1.State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储

组件访问State中数据的第一种方式：

this.$store.state.全局数据名称

eg:

组件访问State中数据的第二种方式：

2.Mutations

//以下不合法代码 —不允许直接修改全局下的变量

所以要用到Mutations
Mutations用于变更Store中的数据
1.只有通过mutations变更Store数据，不可以直接操作Store中的数据
2.通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

mutations的使用

mutations中的方法第一个形参永远都是state

注意：记住只有mutations中的函数才有权利修改（state中的数据）全局数据

可以在触发mutations时传递参数：
通过commit可以调用addN方法 然后可以通过参数3 进行传值
将3传递给step
this.$store.commit()是触发mutations的第一种方式，触发mutations的第二种方式：

然后可以在自己的组件中通过this进行调用

不要在mutations里添加异步操作

3.Actions

Actions用于处理异步任务
如果通过异步操作变更数据，必须通过Actions，而不能使用Mutations，但是在Action中还是要通过触发Mutations的方式间接变更数据 (即Action中不能进行数据的修改 只有mutations中才能修改数据)

记住：commit用于触发某个mutations函数
dispatch用于触发某个actions函数

触发actions异步任务是携带参数
注意 在actions中调用mutations使用的是**context.**commit

this.$store.dispatch()是触发actions的第一种方式，触发actions的第二种方式：

1.从vuex中按需导入mapActions函数
import {mapActions} from ‘vuex’
通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法：
2.将指定的actions函数，映射为当前组件的methods函数
methods：{
…mapActions([‘addASync’,‘addNASync’])
}

4.Getters

Getters用于对Store中的数据进行加工处理形成新的数据

注意:Getters不会修改store中的源数据，只起到包装数据的作用
1.getters可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性
2.Store中的数据发生变化，Getters的数据也会跟着变化

使用Getters的第一种方式：
this.$store.getters.名称
使用Getters的第二种方式
import {mapGetters} from ‘vuex’
computed:{
…mapGetters([‘showNum’])
}