前言
好久沒有寫文章了，最近專案緊張所以很久沒有更新文章了，趁著這段時間不忙先更新一篇關於Vuex和Busemit結合使用的專案實戰篇，希望大家喜歡。
Vuex
先講一下Vuex，每一個Vuex應用的核心就是store（倉庫）。“store”基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)，這部分來自官網的介紹，大傢伙有興趣要深挖Vuex的話可以到官網去看看
Vuex官網：Vuex官網
第一步先進行Vuex安裝
npm install vuex --save
cnpm install vuex --save
複製程式碼第二步建立一個存放Vuex的資料夾Vuex，在Vuex資料夾下面新建Vue_index.js檔案，在裡面引入Vuex。
import Vue from 'vue'
import Vuex from 'vuex'
//使用Vue.use把Vuex註冊成全域性元件
Vue.use(Vuex);
const store = new Vuex.Store({
});
export default store;
複製程式碼第三部在Vuex資料夾下建立state.js存放全域性狀態，並在Vue_index.js引入
state.js
const state={
Creatpack:{
wallet_new_length:0
}
};
// 使用 export default 封裝，讓外部可以訪問
export default state;
複製程式碼Vue_index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
Vue.use(Vuex);
const store = new Vuex.Store({
state,
});
export default store;
複製程式碼之後在main.js中引入Vue_index.js
//vuex狀態管理
import store from './vuex/vuex_index'
new Vue({
el: '#app',
router,
//store進行注入使全域性都可以用Vuex全域性狀態
store,
components: { App },
template: ''
});
複製程式碼至此Vuex就已經引入成功，新建一個vuea.vue元件在裡面先檢視我們之前存的state.Creatpack.wallet_new_length狀態
export default { name: '', data:function () { return{複製程式碼}, methods:{ reload () { console.log(this.$store.state.Creatpack.wallet_new_length) } }, mounted (){ this.reload(); } } 複製程式碼
複製程式碼
通過this.$store方法console.log（this.$store.state.Creatpack.wallet_new_length）的值,至此Vuex先講到這裡，下面等到結合的時候我們再講解如何結合使用Vuex與Busemit以及需要注意的細節。
Busemit
現在我們來講講Busemit，首先什麼是Busemit。簡單來講就是註冊一個空的例項，作為中轉站。從而實現元件之間的通訊（父傳子，子傳父，子傳子等）
上面字面意思已經很清新了，就讓我們看看如何實現一個Busemit，首先是main.js的程式碼
//Bus方法繫結到window下面，提供給外部呼叫
window.Bus =new Vue();
複製程式碼通過上面的一句程式碼就能實現Busemit的建立及引用是不是很神奇，接下來我們要講如何使用Bueemit傳遞引數。
第一步還記得我們上面新建的vuea.vue檔案嗎，現在我們還是用它來講解Busemit的實現步驟
< button v-on:click="reload()">點選我< /button>export default { name: '', data:function () { return{
複製程式碼}, methods:{ reload () { console.log(this.$store.state.Creatpack.wallet_new_length) //使用Bus.$emit方法將值傳輸出去 Bus.$emit("wallet_new_length","changes"); //我們現在可以看到使用Bus.$emit傳輸了一個wallet_new_length值 } }, mounted (){ } } 複製程式碼
複製程式碼
第二步建立vueb.vue檔案，在裡面接收我們剛剛傳輸過來的值
vueb.vue
export default { name: '', data:function () { return{複製程式碼}, methods:{ }, mounted (){ Bus.$on("wallet_new_length",(em) => { //這裡我們通過em就可以取到傳輸過來的引數 console.log(em); }); } } 複製程式碼
複製程式碼
上面通過Bus.$on方法我們就輕鬆取得了wallet_new_length傳輸過來的值，說句題外話Bus.$emit的傳輸方式還可以多引數傳輸比如Bus.$emit("xxxx",{"xxxx":"xxxx"})和Bus.$emit("xxxx",[xxxx,xxxx])這兩種方法，注意取值的方式也會有所不同第一種是通過xxxx引數名取值第二種是通過em[1],em[2]這種方式取值，但是使用Busemit方法還是有一些弊端的，這個我會在下面Vuex與Busemit結合使用時說明。
Vuex與Busemit結合使用
好了上面講了這麼多，現在終於可以進行實戰了，先說一下需求我們希望在vueb.vue不銷燬和不重新整理的前提下重置裡面的資料，那麼接下來就是實現了，還記得我們剛才建立的Vuex資料夾嗎現在開啟裡面的Vuex_index.js然後在資料夾裡面新建一個js檔案命名為mutations.js在下面這樣寫
//引入state.js
import state from './state'
const mutations={
//寫一個計數器每次加1
add(state) {
state.Creatpack.wallet_new_length++;
},
//再寫一個初始化方法初始化start裡面的全域性變數
start(state) {
return state.Creatpack.wallet_new_length=0
}
};
// 使用 export default 封裝，讓外部可以訪問
export default mutations;
複製程式碼之後在Vuex_index.js裡引入mutations.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'Vue.use(Vuex);
const store = new Vuex.Store({
state,
mutations
});
export default store;
複製程式碼現在就可以呼叫了，這裡注意mutations是Vuex裡唯一可以改變全域性狀態的方法類似於methods的使用方式，但是呼叫方法就有比較大的區別。
現在我們可以思考我點選vuea.vue裡面的button標籤想要傳遞一個計數器到vueb.vue進行資料的重置首先
vuea.vue
< button v-on:click="reload()">點選我< /button>export default { name: '', data:function () { return{ //建立一個基礎數字用來計數 wallet_new_length:0 }, methods:{ reload () { //通過 （this.$route.path） 判斷我們是否在 （vueb.vue） 元件下這裡我寫的非常簡單你們實際應用中可以通過實際情況判斷怎麼去寫
複製程式碼let this_path_roter=this.$route.path; if(this_path_roter=="vueb"){ //這一步是重複點選時的操作 //重點來了我們通過this.$store.commit("add")來進行計數的工作也就是剛剛建立的add方法Vuex中規定通過this.$store.commit可以對定義的方法進行呼叫 this.$store.commit("add"); //之後this.$store.state.Creatpack.wallet_new_length賦值在this.wallet_new_length基礎的值上面 this.wallet_new_length=this.$store.state.Creatpack.wallet_new_length; //使用Bus.$emit方法將值傳輸出去 Bus.$emit("wallet_new_length","changes"); //我們現在可以看到使用Bus.$emit傳輸了一個wallet_new_length值 } }else { //這不用說呼叫start的全域性狀態初始化方法就行 this.$store.commit("start"); //將this.wallet_new_length進行初始化 this.wallet_new_length=0; //傳輸值給vueb.vue知道就行 Bus.$emit("wallet_new_length","changes"); //這一步是要跳轉vueb.vue元件下的 this.$router.push({path:'vueb'}); } }, mounted (){ } } 複製程式碼
複製程式碼
提示上面的vuea和vueb兩個元件可以認為是兩個互不干涉父元件下的子元件，在這裡需要傳值進行相關的互動所以我就單獨拎出來說。
vueb.vue
export default { name: '', data:function () { return{ //在這裡我們也需要建立一個初始數值注意這裡要比vuea.vue裡面的初始數值小上一個數 wallet_new_length_change:-1， //這裡thisa原來是true而thisb是false的我就不再寫相關的html了這裡僅做演示用 thisa:false, thisb:true }, methods:{複製程式碼}, mounted (){ Bus.$on("wallet_new_length",(em) => { //這個和上面的vuea元件一樣我就不做過多講解了 let this_path_roter=this.$route.path; if(this_path_roter=="vueb"){ //首先通過判斷我們存的全域性狀態數值是否不等於vueb元件下的初始數值 if(this.$store.state.Creatpack.wallet_new_length!=this.wallet_new_length_change){ //不等於的話就把全域性狀態數值減1然後賦值到vueb元件的初始數值中 this.wallet_new_length_change=this.$store.state.Creatpack.wallet_new_length-1; //之後就是初始化之前說的thisa和thisb了 this.thisa=true; this.thisb=false; } }else { //這裡判斷如果不在vueb元件裡了就初始化wallet_new_length_change的值待下次進行計算 this.wallet_new_length_change=0; } }); }, beforeDestroy(){ //這個就是我之前說的Busemit的小bug它不會自動銷燬只有我們手動銷燬才可以通過Bus.$off方法進行銷燬 Bus.$off("wallet_new_length") } } 複製程式碼
複製程式碼
這邊再進行強調一下Busemit的小bug它不會自動銷燬只有我們手動銷燬才可以通過Bus.$off方法進行銷燬，然後在元件銷燬之前beforeDestroy()引入這個方法就行,這個是根據你們的業務來的需要在哪裡銷燬就在那裡新增就行，下週我會具體說明Busemit的其他bug解決方案，所以敬請期待。
以上便是我這篇Vuex與Busemit結合使用淺談Vuex使用方式的所有內容如有不懂得地方或者需要提出意見的地方請在下方評論區告訴我，謝謝。