vuex是怎么做到将数据注入到每一个组件里面的？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的主要目标是帮助开发者更好地管理应用的状态，使得状态的变化更加可预测和易于调试。

Vuex 将数据注入到每一个组件里面的过程，主要依赖于 Vue 的响应式系统和插件机制。以下是 Vuex 实现这一功能的主要步骤：

1. 创建 Vuex Store：首先，你需要创建一个 Vuex store，这个 store 包含了应用的状态（state）、视图的行为（mutations）、以及获取状态的方式（getters）。这些都是应用的全局单例。

import Vue from 'vue'  
import Vuex from 'vuex'  
  
Vue.use(Vuex)  
  
export default new Vuex.Store({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increment (state) {  
      state.count++  
    }  
  }  
})

1. 将 Vuex Store 注入到 Vue 实例：在创建 Vue 实例（或者根组件）时，你需要将 Vuex store 作为选项传入。这样，store 就会被注入到 Vue 实例中，并且可以在其任何子组件中通过 this.$store 访问到。

import Vue from 'vue'  
import App from './App.vue'  
import store from './store'  
  
new Vue({  
  el: '#app',  
  store,  
  render: h => h(App)  
})

1. 在组件中使用 Vuex 数据：由于 Vuex store 已经被注入到 Vue 实例中，因此你可以在组件中通过 this.$store.state.yourData 来访问 store 中的数据。然而，直接访问 store 中的状态并不是一个好的实践，因为这可能会导致组件和 store 之间的高度耦合。更好的方式是使用计算属性（computed properties）或 methods 来返回 store 中的状态。

computed: {  
  count () {  
    return this.$store.state.count  
  }  
}

4.使用 mapState、mapGetters 等辅助函数：Vuex 提供了 mapState、mapGetters 等辅助函数，可以帮助你更方便地在组件中使用 store 中的数据。这些函数会返回一个计算属性对象，使得你可以直接在组件的模板中使用这些计算属性。

import { mapState } from 'vuex'  
  
export default {  
  computed: mapState([  
    // 映射 this.count 为 store.state.count  
    'count'  
  ])  
}

1. 插件化集成：Vuex 通过 Vue 的插件机制进行集成，这意味着你可以利用 Vue 的全局 API 来访问 store，以及在组件中使用 store 的数据。这也是 Vuex 能够将数据注入到每一个组件中的关键所在。

综上所述，Vuex 通过创建全局单例的 store，将 store 注入到 Vue 实例中，并提供了一系列的辅助函数和机制，使得开发者可以在组件中方便地访问和使用 store 中的数据。