10分钟让你学会使用Vuex

1.为什么要用Vuex?

组件之间共享数据的方式

1. 父组件向子组件传值：使用v-bind属性绑定
2. 子组件向父组件传值：使用v-on事件绑定
3. 兄弟组件之间的数据进行共享：EventBus：

数据接收方通过 $on注册一个自定义的事件，数据发送方通过$emit发送数据

以上的方式只能在小范围内进行数据共享，对于大范围以及频繁的数据共享来说，就不太实用。

当使用了Vuex，使用其Store进行数据管理。数据的处理就会变得简便

2.Vuex概述

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

使用Vuex管理数据的好处：

A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护
B.能够高效的实现组件之间的数据共享，提高开发效率
C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

对于组件之间共享的数据，可以存储在Vuex中，对于组件的私有数据，存储在自身的data数据中即可。（一般情况下）

3.Vuex 基本使用

1.安装vuex包

npm install vuex --save

2.导入Vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3.创建store对象

const store = new Vuex.Store({
 // state 中存放的就是全局共享的数据
 state: { count: 0 }
})

4. 将 store 对象挂载到 vue 实例中

main.js中写入

new Vue({
 el: '#app',
 render: h => h(app),
 router,
 // 将创建的共享数据对象，挂载到 Vue 实例中
 // 所有的组件，就可以直接从 store 中获取全局的数据了
 store
})

4.Vuex中的核心特性

A.State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储
例如，打开项目中的store.js文件，在State对象中可以添加我们要共享的数据，如：count:0

组件中访问State的方式：

1). this.$store.state.全局数据名称 如：this.$store.state.count

2).先按需导入mapState函数： import { mapState } from 'vuex'
然后数据映射为计算属性： computed:{ ...mapState(['全局数据名称']) }

B.Mutation

Mutation 用于变更 Store中 的数据。
① 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

组件中访问Mutation的方式：

1）首先在store中定义Mutation，在组件的methods中触发事件：


上图中，add函数为未传参函数，addN为传参函数。在第二张图中，调用的方式就会有所不同。
2) 与State 的第二种方式差不多

// 1. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的methods 方法：

// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: {
 ...mapMutations(['add', 'addN'])
}

C.Action

Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。

组件中访问Action的方式：

1）先定义再调用

在对应的组件中，使用this.$store.dispatch('actions中的方法名')直接在函数中进行调用：

2）

// 1. 从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：

// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数
methods: {
 ...mapActions(['addASync', 'addNASync'])
}

可直接在点击事件中直接调用，不用调用dispatch。

D.Getter

Getter用于对Store中的数据进行加工处理形成新的数据
它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变化。

打开store.js文件，添加getters，如下：

export default new Vuex.Store({
  .......
  getters: {
    showNum (state) {
      return `当前最新的数量是 【${state.count}】`
    }
  }
})

在组件中，添加插值表达式直接使用getters
<h3>{{$store.getters.showNum}}</h3>

或者也可以在组件中，导入mapGetters，并将之映射为计算属性。

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

对于上述的第二种方式：

将mapState…导入组件之后，其中State,Getters在computed中，Mutations和Actions在methods中。计算属性在computed计算组件中定义，事件函数在methods方法中进行定义。

总结

Vuex到底是干什么的？个人认为：