通俗易懂 的 VueX

Vuex简介

---

   复习以下常见组件之间共享数据的方式：

父向子传值：v-bind 属性绑定

子向父传值：v-on    事件绑定

兄弟组件之间共性数据：EventBus.  $on接受数据的那个组件，$emit发送数据的那个组件。 

    但是当我们的运用遇到多个组件共享状态时，多层嵌套的组件就会变得很繁琐（如下左图所示），维护相当困难。于是我们就想到了把组件共享的数据状态抽取出来，以一个全局单例模式管理（如下左图所示）。

   虽然 Vuex具有集中管理共享的数据，高效地实现组件之间数据共享，存储在vuex中的数据都是响应式的的优点。然而当我们的应用够简单时，就不要使用 Vuex。如果需要构建一个中大型单页应用，考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

VueX的简单运用 

---

1. 安装并导入VueX包：参考官网 安装 | Vuex

安装完之后会新增一个store文件夹及index.js文件，并在main.js中引入和挂载。如下所示

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

 访问state节点使用的方法：

方法一：在子组件中通过：this.$store.state.

 方法二： 从vuex中按需映入mapState函数，将全局数据映射为组件的计算属性

(注意：state中的数据只能通过mutation 变更，不可以直接操作）

<template>
    <div>
        <!-- 方法一 -->
        <h3>当前count的最新值为:{{$store.state.count}}</h3>
        <h3>当前count的最新值为:{{count}}</h3>
    </div>
</template>

<script>
// 方法二
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['count'])
  }
}
</script>

Mutation节点： Vuex 的 store 中的状态的唯一方法是提交 mutation。 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数.

（mutation 中执行同步操作。异步操作可以放到action中）

触发mutation的方法：

方法一：

不带参数：this.$store.commit('add')

携带参数：this.$store.commit('add', n) (大多数情况下参数是一个对象)

方法二：通过从vuex中按需映入mapMutation函数，将指定的mutation,映射为当前组件的methods函数

Action节点：Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

触发action节点方法：

方法一：this.$store.dispatch

 方法二：通过从vuex中按需映入mapAction函数，将指定的mutation,映射为当前组件的methods函数

Getter节点：getter用于对store中的数据进行加工处理 形成新的数据。不会修改原数据 起到包装作用访问getter节点：

方法一： $store.getters.

方法二：从vuex中按需映入mapState函数，将全局数据映射为组件的计算属性