[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)