[TOC] >[success] # Vuex -- 组件的状态管理 * vuex 官方的图解 ~~~ 1.简单的解释'vue components' 去派发'Action',完成api的异步响应,将数据给到'Mations',在来改变vuex 中数据的stat,从而在触发视图的更新,可以看到这个过程是单项的。 ~~~ ![](https://img.kancloud.cn/b3/f9/b3f994c71d894b582bae15b4a1df8ebb_701x551.png) >[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'); ~~~