今天主要解決：
1. 什麼是vuex？
2. 為什麼要用到vuex？
3. 怎麼用？
文字比較多，不要嫌繁瑣，跟這練習一遍就會了，部落客可是一個字一個字寫上的。
我們都知道，在做項目時，頁面與頁面之間要用到傳值和通信，都清楚父子通信，兄弟間通信等等。。。
但是有複雜的項目，可能會嵌套很多層，這樣一層一層的傳值，很麻煩！不光是對代碼品質造成了影響，也對代碼運作的性能造成了影響，甚至會造成難以排查的bug。
之前給幾個小白同學講個例子：
小朋友想要零花錢，會先和媽媽要，媽媽沒有，就去和爸爸要，爸爸把零花錢給了媽媽，媽媽再給了小朋友。
這個就很麻煩了，解決辦法，不如直接爸爸把零花錢放在一個指定的位置，誰要，誰就去那個位置拿，這樣就友善多了。
是以，vuex就是那個指定的地方，官方給起了個很專業的名字，叫：狀态管理模式，說白了，就是一個統一存放狀态的地方，誰用裡邊的值都可以取到，無論頁面的層次多深，不用擔心拿不到的問題，這樣解決複雜通信或傳值的問題就很友善了。
用到的地方也有很多：比如頁面切換後再回來，依然顯示上次搜尋條件的結果，或n個元件同時共享一個狀态等等……
這些了解了，前兩個問題【什麼是vuex/為什麼要用到vuex】自然就迎刃而解了，接下來講一下vuex的實作原理，我們先來附上一張第一眼難以了解的官方圖檔
相信很多小白看完這張圖檔後根本不了解，沒關系，我舉例說一下：
比如有一個A頁面顯示了“100”這個數字，并且我可以随意更改，但是需求上，其他BCD三個頁面也要顯示同樣的數字，這個字段改成什麼，就顯示什麼，要求就是要顯示的數字一模一樣。
那麼我就要有個地方，來放這個資料，我們先建立一個js檔案，在裡邊定義一個對象，起名叫state，這個state專門定義這個資料的
const state={
name : 100
} 然後所有頁面都可以顯示出這個name，顯示後還要有一個可以改的地方，我們同樣，在這個js檔案中，在定義一個可以寫方法的對象叫mutations，它裡邊專門放方法，如下：
const mutations ={
addNumber(){
state.name+=100
},
miunNumber(){
state.name-=100
}
} 檔案中我寫了一個方法叫addNmuber，這個名字随便起，我每次調用這個方法，就可以增加100，這樣就實作了所有頁面顯示的數字，都會增加。
這個mutations中所寫的方法，vue要求必須要是同步的，是以這裡都寫同步的方法，比如加100，或減100，或變顔色等需求都屬于同步方法。這樣也就是mutations控制了state中某個值的改變。
回到官網圖，看下圖中上邊還有一個actions，actions和mutations是一樣的寫法，差別在于，actions中要寫異步的方法，比如要調用某個異步接口，可以寫在這個當中，比如高德地圖和百度地圖的接口，就是異步請求，頁面中要引入一個地圖元件，很多頁面都公用，就可以寫在這個當中。
那麼這個異步方法actions有什麼用？如果有需求，說必須等待這個接口成功傳回一個數值後，再改變state中的值，這時就需要actions中調用一個接口，接口傳回後，調用mutations中的方法，來改變state中的值。
const actions = {
actionsAddNumber(context){
this.axios.get('/接口名').then(()=>{
context.commit('addNumber')
})
},
} actionsAddNumber名字随便起，它接收一個context參數。其中調用了異步方法，成功用，利用commit觸發了mutations中的addNumber方法。
實戰當中，我們可以利用ES5的結構指派，改變一下代碼，直接提取context參數中的commit使用，如下：
const actions = {
// 結構指派提取commit
actionsAddNumber({commit}){
this.axios.get('/接口名').then(()=>{
// 直接使用commit
commit('addNumber')
})
},
} 那麼在vue頁面使用
store.dispatch
觸發action中的方法：
this.$store.dispatch('actionsAddNumber')
不過注意的是，非大型項目actions并不是必須要用到的，一般state和mutations已足夠我們使用。官網也建議，非必須情況下，不建議使用vuex，因為我們需要下載下傳，還要引入，在檔案大小和加載上，都是會受到影響的。
回過頭來看官網的圖檔，或許，你就了解了，若面試問到，說一下vuex的實作原理，就按照這個了解，按照官網的圖說：
頁面中的元件，通過dispatch，來調用actions方法異步加載，成功後，通過commit觸發mutations中的某個方法，來改變state中的某個值，這就是原理，最好再加上自己的了解說出來。
接下來說下vuex的用法：
建立項目時，vuex不會自帶，因為不是每個項目都需要vuex，是以我們需要下載下傳
建立一個store檔案夾，這個名字自己随意起，規範一些起個store
檔案夾中放入一個js檔案，例如：store.js。
檔案中引入vuex，并建立出state、mutations即可（getters本文暫時不講）。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 定義資料
// state在vuex中是用于儲存資料的
const state={
name : 100
}
// 定義方法 mutation同步
// mutations 裡面方的是方法，主要用于改變state中的資料源
const mutations ={
addNumber(){
state.name+=100
},
}
// 執行個體化 Vuex.store,用到什麼引什麼，用到actions就引入actions，用到getters就引入getters，本文隻用到這兩個
const store = new Vuex.Store({
state,
mutations
})
export default store; 搞定，vuex建立完成，就這麼簡單的一個vuex檔案寫完了，接下來vue頁面檔案中該使用這個了
首先我們需要找到目錄中main.js中引入vuex，把檔案目錄引入，main.js是什麼，不懂的小白要去查查。
import Vue from 'vue'
import router from './router'
import store from './store/store'
new Vue({
el: '#app',
router, // 這個要使用
store, // 這個也要使用
components: { App },
template: '<App/>'
}) 使用很簡單，因為我們在上邊的store中實力化了這幾個方法（看上邊注釋），是以我們就需要用this.$store來進入這個檔案中，那麼我想在頁面中顯示state中的數字100，如下寫法：
<div>{{this.$store.state.name}}</div> 任何一個頁面都可以這樣引用，引入一個，顯示一個。改變值的方法如下：
<button @click="add">增加100</button> methods:{
add(){
this.$store.commit('addNumber')
},
} 點選按鈕，就會增加數字了，并且改變一個，所有頁面上的這個屬性，也會跟着改變，多加練習和了解。
當然，我們可以向mutations中，傳入數值：
mutations: {
// 兩個參數，一個是state，一個是參數n（也叫payload載荷）
addNumber(state, n) {
state.name+= n
}
} this.$store.commit('addNumber', 100) 這樣就是非固定的寫法，可以傳入你想要的參數值。
avillin筆記：
1. 能改變state的方法是mutations。
2. 頁面中用this.$store.state來擷取到state中的某個值。
3. 頁面中使用this.$store.commit來調用vuex中mutations裡的某個方法。
4. 頁面中使用this.$store.dispatch來調用vuex中actions裡的某個方法。