# 大綱 > 這一講我們最主要的就是學習vue中的資料管理VueX，這個是一個大殺器 # 一、回顧一些Promise相關的東西 > Promise 有幾個比較重要的方法，最重要的還是有一個叫做all的方法，這個也是非常的強大的 > 假設我們目前要求，希望能按順序的拿到先後的兩個ajax那麼我應該怎麼處理呢 ```js Promse.all( [ new Promose( ( resolve,rejcet ) => { $.ajax({ url:'xxxx', data:'xxxx', sucess:(res) => { resolve(res) } }) $.ajax({ url:'xxxx', data:'xxxx', sucess:(res) => { resolve(res) } }) }) ]).then( results => { consel.log(results) // 這樣拿到的就是一個數組了， 先後的順序就是裡面的值 } ) ``` > 注意啊這裡對promise的深入的解釋說明 1. 首先我們的兩個回撥resolve 還有reject注意啊， ```js 這兩個回調回調函式是 在傳入的時候定義的，但是呼叫是在promse裡調的！這兩個引數是函式！！函式！！回撥函式！ ``` # 一、概念 > Vue官方介紹 > 絕大多數的管方都非常喜歡用概念來解釋概念，這就有點難搞了，我這個概念的都不懂，你又給我搞另一個概念 > 實際上那個Vuex就是一個大管家，統一進行管理，全域性的單例模式  ## 1.最通俗的解釋 > Vuex實際上就是一個 用來放 一些元件共享的資料的，實際上這可能是是下面這些情況 1. 登入 假設我們目前有50+頁面。我們都每一個頁面都要傳送介面請求而且這些請求需要token，那麼如果我是登入的，我就需要在每一個頁面拿到我的登入token這樣就造成了資料的傳來傳去非常麻煩，如果我們有一個公共的地方來放這些東西就好了 2. 購物車。收藏 也會有這種元件之間打出傳值的情況發生，那麼我如何管理這些東西呢，這個就是一個問題 **綜上所述，我們需要使用Vuex*** # 二、如何入門的使用 ## 2.簡單的使用 > 這裡假設有這樣的一個需求：我們目前有兩個元件App.vue 還有BMlaoli.vue 我呢，他們之間有層級的關係，app裡面有一個變數叫做contuend 我希望我在app裡面對countend的操作能夠動態的傳遞到我們的BMlaoli裡，而且不使用父子元件傳值，那麼我們如何做呢？親看下面講演 1. 首先我們需要有兩個元件 他們都是最基礎的樣子 App ```html ``` BMlaoli ```html ``` 2. app的業務邏輯 ```html ``` > 但是問題來了，我目前希望你們在app裡面做的更改可以反映到我的Bm元件裡，而且不通過父子元件的方式，那麼我該怎麼做呢？實際上非常的簡單 這個時候我們就需要一個 ‘第三者來處理這個東西’,這個第三者就是這個Vuex。 3. vueX的引入 > 實際上，如果你有手動的安裝使用配VueRouter的經驗的話。這Vuex也是差不多的都是一樣的使用方法 第一步：npm install vuex 第二步：建立一個資料夾sote裡寫一個index.js 第三部：在index裡面安裝 第四部：在main裡掛載就好了 index.js ```js import Vue from 'vue' import Vuex from 'vuex' // 安裝 Vue.use(Vuex) // 使用 const store = new Vuex.Store({ state:{}, mutations: { }, actions:{}, getters:{}, modules:{} }) // 倒出 export default store ``` main.js ```js import Vue from 'vue' import App from './App.vue' // 匯入 import Store from './store' Vue.config.productionTip = false // 掛載 new Vue({ Store, render: h => h(App), }).$mount('#app') ``` 非常的簡單 4. app裡的業務邏輯 ```html ``` # 三、正確的操作state的方式 ## 1.需要注意的地方 $store.state.contuned > 需要非常說的就是 請你不要這樣去修改vuex裡的值，而是通過如下的方式去修改，詳細見官方api說明 1. 概述我們的更改邏輯 view檢視提交（Dispatch） ----> actions處理非同步操作（commit） -----> Muations 記錄你的修改 ，方便以後追蹤（Mutate） -----> state修改（render） 2. 程式碼邏輯 /state/index.js ```js state:{ contuned:1000 }, mutations: { increment(state){ state.contuned++ }, decrement(state){ state.contuned-- }, }, actions:{}, getters:{}, modules:{} ``` /app.vue ```html ``` **這樣我們就能開發者工具追綜這些東西的變化了** # 四、核心概念解讀 > vueX中有五個核心 ## 1.單一狀態樹 1. 管理系統 現實生活中的例子 我們先來舉一個例子，在我們國家一個人有很多的資訊會被記錄到檔案管理的各個部門，車貸房貸，身份證 ，戶口 ，結婚登記，這些資訊都分散式的存放在各個局，地產局，戶口部門......，這樣對於我們的人 來說， 我們的資料來來源就是多樣的，多資料來源，但是這樣有問題，就是一起管理的時候是不好管理的，你可能需要去這個地方蓋章，去哪個地方改造，如果不通過又要重新回來蓋章，XXXX太麻煩了。 2. vuex的管理邏輯 在我們的vue中確確實實 ，你可以new 多個Vuex但是，我們是不推薦的，因為這樣管理起來就會非常的麻煩，我們的vuex推薦是 只使用一個vuex來管理共享的資料來源，這個設計理念就是；**單一資料來源（也叫單一狀態樹）** ## 2.getter > 這個東西類似於計算屬性 > 有時候我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數： > 高階函式 ，返回函式的呼叫 1. 需求，還是原來的案例，我希望我獲取的contuned的平方 > 當然了，你這樣也是可以的 ```html

{{ $store.state.contuned * $store.state.contuned }}

``` 但是很low 是不啦，如果你要寫很多很多的複雜邏輯操作，那不就涼涼了嗎，所以這裡引申出我們的getter，字面理解就是獲取的時候，對資料做一些手腳，那麼我們看看如何使用 2. 明確一下，我們的操作基本上都是在我們的vuex檔案裡面進行的 > 在getter裡面搞事情 store/index.js ```js import Vue from 'vue' import Vuex from 'vuex' // 安裝 Vue.use(Vuex) // 使用 const store = new Vuex.Store({ state:{ contuned:1000 }, mutations: { increment(state){ state.contuned++ }, decrement(state){ state.contuned-- }, }, actions:{}, getters:{ powerCounter(state){ return state.contuned * state.contuned } }, modules:{} }) // 倒出 export default store ``` 使用的時候就非常簡單了 /bmlaoli.vue ```html

{{ $store.getters.powerCounter }}

``` > 現在我們又有了另一個需求，如果我想傳遞引數，怎麼辦，我希望我過濾出一些資料，而且我們希望我們是指定條件的過濾 **這裡就涉及到我們的傳遞引數的問題了** store/index.js ```js fliter(state,getters){ console.log(getters)//這裡的getters實際上就是你的整個外面的getters物件 // 如果你要傳遞引數，你只能返回函式的呼叫 return age => { state.students.filter( s => s.age >= age ) } } ``` /bmlaoli.vue ```html 原資料

{{ $store.getters.students }}

過濾之後

{{ $store.getters.fliter(40) }}

``` ## 3.mutation > vuex唯一更新狀態的方式,就是在這裡,如果你要更改資料，vuex唯一的更改方式就是 mutation ### 3.1 概念 事件型別（函式名） 回撥函式（回撥函式，具體的業務程式碼） ```js mutations: { // increment 事件型別 // (state){ 回撥函式 // state.contuned++ // }, increment(state){ state.contuned++ }, decrement(state){ state.contuned-- }, }, ``` ### 3.2 傳遞引數payload負載 1. 單個引數 2. 多引數（傳遞物件） > 需求：我們希望點選更改狀態的時候的時候可傳入引數 /sotre/index.js ```js mutations: { increment(state){ state.contuned++ }, decrement(state){ state.contuned-- }, incrementCour(state,palyload){ consle.log(palyload)//拿到了一個傳遞過來的物件 } }, ``` bmlaoliu.vue3 ```html addcCount(parmas){ this.$sore.commit( 'incrementCour' ,palyload