[JavaScript知识库]Vuex原理、用法、与事件总线区别详解

Vuex与全局事件总线

上图是使用全局事件总线进行多组件数据共享，如果组件BCD需要获得组件A中的数据，或者A需要回调BCD中的数据，需要频繁地调用eventbus，操作复杂且繁琐。

上图是通过Vuex实现多组件数据共享，将组件ABCD需要共享的数据存储在了Vuex组件中，这样相当于只需要单次进行组件间地双向通信即可共享到数据。

Vuex与事件总线的本质区别

• eventBus利用事件抛发的原理进行传递数据
• Vuex是响应式的，和数据双向绑定的原理一样，使用了getter和setter进行数据劫持

Vuex是什么

专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理，也是一种组件间通信的方式，且适用于任意组件间通信。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex的优势

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

使用Vuex的场景

• 多个组件依赖于同一状态
• 来自不同组建的行为需要变更同一状态

Vuex原理图

• Actions，Mutations，State都是Object对象

• actions用于响应组件中的动作

• mutations用于操作数据（state）

• state用于存储数据

PS：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

Vuex的用法

1. 安装Vuex
2. 创建Store对象管理数据
3. 挂载Store对象到Vue实例

• 安装Vuex

  npm i -S vuex
  

• 创建Store对象管理数据

  ①创建src/store目录，并在其中创建vuex.js文件用于导入并创建Store对象

  ②编写src/store/index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    // state中存放的就是全局共享的数据
    state: {count: 0}
})

Vue.use(Vuex) 顺序一定要在 new Vuex.Store 之前

• 挂载 Store 对象到 Vue 实例

import store from '@/store/vuex'

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");

State、Getters、Mutations、Actions、Modules

https://vuex.vuejs.org/zh/guide/state.html

这里最好把官方文档都仔细看一遍

Getters

getter是对 Store中已有的数据加工处理形成新的数据，类似Vue的计算属性，Store数据发生变化，则 getter中的数据也会跟着变化