VueX 的使用，小白一定要看！

今天主要解決：

1. 什么是vuex？
2. 為什么要用到vuex？
3. 怎么用？

文字比較多，不要嫌繁瑣，跟這練習(xí)一遍就會(huì)了，博主可是一個(gè)字一個(gè)字寫上的。

我們都知道，在做項(xiàng)目時(shí)，頁(yè)面與頁(yè)面之間要用到傳值和通信，都清楚父子通信，兄弟間通信等等。。。
但是有復(fù)雜的項(xiàng)目，可能會(huì)嵌套很多層，這樣一層一層的傳值，很麻煩！不光是對(duì)代碼質(zhì)量造成了影響，也對(duì)代碼運(yùn)行的性能造成了影響，甚至?xí)斐呻y以排查的bug。

之前給幾個(gè)小白同學(xué)講個(gè)例子：
小朋友想要零花錢，會(huì)先和媽媽要，媽媽沒(méi)有，就去和爸爸要，爸爸把零花錢給了媽媽，媽媽再給了小朋友。
這個(gè)就很麻煩了，解決辦法，不如直接爸爸把零花錢放在一個(gè)指定的位置，誰(shuí)要，誰(shuí)就去那個(gè)位置拿，這樣就方便多了。

所以，vuex就是那個(gè)指定的地方，官方給起了個(gè)很專業(yè)的名字，叫：狀態(tài)管理模式
，說(shuō)白了，就是一個(gè)統(tǒng)一存放狀態(tài)的地方，誰(shuí)用里邊的值都可以取到，無(wú)論頁(yè)面的層次多深，不用擔(dān)心拿不到的問(wèn)題，這樣解決復(fù)雜通信或傳值的問(wèn)題就很方便了。

用到的地方也有很多：比如頁(yè)面切換后再回來(lái)，依然顯示上次搜索條件的結(jié)果，或n個(gè)組件同時(shí)共享一個(gè)狀態(tài)等等……

這些理解了，前兩個(gè)問(wèn)題【什么是vuex/為什么要用到vuex】自然就迎刃而解了，接下來(lái)講一下vuex的實(shí)現(xiàn)原理，我們先來(lái)附上一張第一眼難以理解的官方圖片



相信很多小白看完這張圖片后根本不理解，沒(méi)關(guān)系，我舉例說(shuō)一下：


比如有一個(gè)A頁(yè)面顯示了“100”這個(gè)數(shù)字，并且我可以隨意更改，但是需求上，其他BCD三個(gè)頁(yè)面也要顯示同樣的數(shù)字，這個(gè)字段改成什么，就顯示什么，要求就是要顯示的數(shù)字一模一樣。

那么我就要有個(gè)地方，來(lái)放這個(gè)數(shù)據(jù)，我們先創(chuàng)建一個(gè)js文件，在里邊定義一個(gè)對(duì)象，起名叫state，這個(gè)state專門定義這個(gè)數(shù)據(jù)的
const state={ name : 100 }

然后所有頁(yè)面都可以顯示出這個(gè)name，顯示后還要有一個(gè)可以改的地方，我們同樣，在這個(gè)js文件中，在定義一個(gè)可以寫方法的對(duì)象叫mutations，它里邊專門放方法，如下：
const mutations ={ addNumber(){ state.name+=100 }, miunNumber(){
state.name-=100 } }
文件中我寫了一個(gè)方法叫addNmuber，這個(gè)名字隨便起，我每次調(diào)用這個(gè)方法，就可以增加100，這樣就實(shí)現(xiàn)了所有頁(yè)面顯示的數(shù)字，都會(huì)增加。

這個(gè)mutations中所寫的方法，vue要求必須要是同步的，所以這里都寫同步的方法，比如加100，或減100，或變顏色等需求都屬于同步方法。這樣也就是mutations控制了state中某個(gè)值的改變。


回到官網(wǎng)圖，看下圖中上邊還有一個(gè)actions，actions和mutations是一樣的寫法，區(qū)別在于，actions中要寫異步的方法，比如要調(diào)用某個(gè)異步接口，可以寫在這個(gè)當(dāng)中，比如高德地圖和百度地圖的接口，就是異步請(qǐng)求，頁(yè)面中要引入一個(gè)地圖組件，很多頁(yè)面都公用，就可以寫在這個(gè)當(dāng)中。


那么這個(gè)異步方法actions有什么用？如果有需求，說(shuō)必須等待這個(gè)接口成功返回一個(gè)數(shù)值后，再改變state中的值，這時(shí)就需要actions中調(diào)用一個(gè)接口，接口返回后，調(diào)用mutations中的方法，來(lái)改變state中的值。
const actions = { actionsAddNumber(context){ this.axios.get('/接口名').then(()=>{
context.commit('addNumber') }) }, }

actionsAddNumber名字隨便起，它接收一個(gè)context參數(shù)。其中調(diào)用了異步方法，成功用，利用commit觸發(fā)了mutations中的addNumber方法。
實(shí)戰(zhàn)當(dāng)中，我們可以利用ES5的結(jié)構(gòu)賦值，改變一下代碼，直接提取context參數(shù)中的commit使用，如下：
const actions = { // 結(jié)構(gòu)賦值提取commit actionsAddNumber({commit}){
this.axios.get('/接口名').then(()=>{ // 直接使用commit commit('addNumber') }) }, }
那么在vue頁(yè)面使用store.dispatch觸發(fā)action中的方法：
this.$store.dispatch('actionsAddNumber')


不過(guò)注意的是，非大型項(xiàng)目actions并不是必須要用到的，一般state和mutations已足夠我們使用。官網(wǎng)也建議，非必須情況下，不建議使用vuex，因?yàn)槲覀冃枰螺d，還要引入，在文件大小和加載上，都是會(huì)受到影響的。

回過(guò)頭來(lái)看官網(wǎng)的圖片，或許，你就理解了，若面試問(wèn)到，說(shuō)一下vuex的實(shí)現(xiàn)原理，就按照這個(gè)理解，按照官網(wǎng)的圖說(shuō)：
頁(yè)面中的組件，通過(guò)dispatch，來(lái)調(diào)用actions方法異步加載，成功后，通過(guò)commit觸發(fā)mutations中的某個(gè)方法，來(lái)改變state中的某個(gè)值
，這就是原理，最好再加上自己的理解說(shuō)出來(lái)。

接下來(lái)說(shuō)下vuex的用法：

創(chuàng)建項(xiàng)目時(shí)，vuex不會(huì)自帶，因?yàn)椴皇敲總€(gè)項(xiàng)目都需要vuex，所以我們需要下載
npm install vuex --save
創(chuàng)建一個(gè)store文件夾，這個(gè)名字自己隨意起，規(guī)范一些起個(gè)store

文件夾中放入一個(gè)js文件，例如：store.js。

文件中引入vuex，并創(chuàng)建出state、mutations即可（getters本文暫時(shí)不講）。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義數(shù)據(jù) //
state在vuex中是用于儲(chǔ)存數(shù)據(jù)的 const state={ name : 100 } // 定義方法 mutation同步 // mutations
里面方的是方法，主要用于改變state中的數(shù)據(jù)源 const mutations ={ addNumber(){ state.name+=100 }, }
// 實(shí)例化 Vuex.store,用到什么引什么，用到actions就引入actions，用到getters就引入getters，本文只用到這兩個(gè)
const store = new Vuex.Store({ state, mutations }) export default store;
搞定，vuex建立完成，就這么簡(jiǎn)單的一個(gè)vuex文件寫完了，接下來(lái)vue頁(yè)面文件中該使用這個(gè)了

首先我們需要找到目錄中main.js中引入vuex，把文件目錄引入，main.js是什么，不懂的小白要去查查。
import Vue from 'vue' import router from './router' import store from
'./store/store' new Vue({ el: '#app', router, // 這個(gè)要使用 store, // 這個(gè)也要使用
components: { App }, template: '<App/>' })

使用很簡(jiǎn)單，因?yàn)槲覀冊(cè)谏线叺膕tore中實(shí)力化了這幾個(gè)方法（看上邊注釋），所以我們就需要用this.$store來(lái)進(jìn)入這個(gè)文件中，那么我想在頁(yè)面中顯示state中的數(shù)字100，如下寫法：
<div>{{this.$store.state.name}}</div>
任何一個(gè)頁(yè)面都可以這樣引用，引入一個(gè)，顯示一個(gè)。改變值的方法如下：
<button @click="add">增加100</button> methods:{ add(){
this.$store.commit('addNumber') }, }
點(diǎn)擊按鈕，就會(huì)增加數(shù)字了，并且改變一個(gè)，所有頁(yè)面上的這個(gè)屬性，也會(huì)跟著改變，多加練習(xí)和理解。

當(dāng)然，我們可以向mutations中，傳入數(shù)值：
mutations: { // 兩個(gè)參數(shù)，一個(gè)是state，一個(gè)是參數(shù)n（也叫payload載荷） addNumber(state, n) {
state.name+= n } } this.$store.commit('addNumber', 100)
這樣就是非固定的寫法，可以傳入你想要的參數(shù)值。

avillin筆記：

1. 能改變state的方法是mutations。
2. 頁(yè)面中用this.$store.state來(lái)獲取到state中的某個(gè)值。
3. 頁(yè)面中使用this.$store.commit來(lái)調(diào)用vuex中mutations里的某個(gè)方法。
4. 頁(yè)面中使用this.$store.dispatch來(lái)調(diào)用vuex中actions里的某個(gè)方法。

• ? 上一篇：.Net Core 認(rèn)證系統(tǒng)源碼解析
• ? 下一篇： 2019年高級(jí)Java程序員面試題匯總