[TOC] >[success] # 为什么要使用vuex ~~~ 1.组件之间传值的方式有很多，可以通过各种办法进行父传子，子传父， 兄弟组件和非相关组件的传值通信，但是会出现一个问题如果多个组件之间 要共享状态(数据)多个组件之 间互相传值很难跟踪数据的变化，如果出现问 题很难定位问题 2.因此vuex 就诞生了'把组件的共享状态抽取出来，以一个全局单例模式管理' 3.vuex作用是进行状态管理，解决复杂组件通信，数据共享 ~~~ >[success] # Vuex -- 组件的状态管理 * vuex 官方的图解 ~~~ 1.简单的解释'vue components' 去派发'Action',完成api的异步响应，将数据给到'Mations',在来改变vuex 中数据的stat，从而在触发视图的更新，可以看到这个过程是单项的。 ~~~  >[info] ## Vuex -- 是什么 ~~~ 1.官方文档的解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测 的方式发生变化 2.我的解释: 就是组件之间的通信，简单的说如果没有使用$bus这种形式，两个 组件的通信必须经过父组件做桥梁传递，如果使用'bus' 需要在创建一个Vue实 例，对于小型项目这样解决已经可以，但大型项目需要更加细分的拆分，这时候 需要Vuex 3.在下面的使用中我们可以看到，我们将Vuex 整个创建的实例挂载到了main.js 中的根vue实例中，这样所有组件都可以共享这个vuex ~~~ >[info] ## Vuex -- 安装和使用 >[danger] ##### 页面引入的安装方法 ~~~ 1.先引入vue 在引入vuex ~~~ ~~~ <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vuex@2.0.0"></script> ~~~ >[danger] ##### npm 安装的方法 ~~~ npm install vuex --save ~~~ >[danger] ##### 在webpack 或者cli 中使用 * 在创建的'store' 文件夹下的'index.js' 文件中做如下配置 ~~~ 1.第一步导入vuex 2.第二步创建引入Vuex 3.第三步创建一个new Vuex.Store 实例 ~~~ ~~~ import Vue from 'vue' import Vuex from 'vuex' // 第一步 import state from './state' import mutations from './mutations' import actions from './actions' import getters from './getters' import user from './module/user' Vue.use(Vuex); // 第二步 // 第三步 export default new Vuex.Store({ state, mutations, actions, getters, modules:{ user } }) ~~~ * 在main.js 文件中挂载到根vue实例中 ~~~ import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) }).$mount('#app'); ~~~ >[danger] ##### vuex 是不是必备的 ~~~ 1.vuex 官网也给了相应的意见如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个 中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。 ~~~ [关于store ](https://cn.vuejs.org/v2/guide/state-management.html#%E7%AE%80%E5%8D%95%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E8%B5%B7%E6%AD%A5%E4%BD%BF%E7%94%A8)