Vue兄弟組件(非父子組件)狀態共享與傳值

 

前言：網上大部分文章寫的有點亂，很少有講得易懂的文章。

　　　所以，我寫了篇在我能看得懂的基礎上又照顧到大家的文章 =。=

 

• • 作者：X1aoYE
  • 備注：此文原創，轉載請注明~  內容里的<br>請無視。。

 

關鍵字：Vue、非父子組件、兄弟組件、傳值、共享狀態

 

• 應用例子：

1.  主題顏色更換
2.  購物車傳值
3.  就像名字所說的兄弟組件傳值，自己理解其他例子了哈~

• 小型項目：

　   推薦使用 global event bus (事件總線)  ，不然小項目里用 Vuex 相對來說會挺繁瑣

　　  步驟：

　　  1. 新建一個 bus.vue  (只是個 .vue ，不用想太多)

　　import Vue from 'vue' //import一個vue類

　　export const bus = new Vue() //實例化並將它export

　　  2. 使用

在我們的一個組件(這里指的是發送方)里：

import { bus } from 'bus.js'
// 其他代碼~
bus.$emit('myEvent', 'this.mydata')
// 其他代碼~
// 解釋：bus.$emit('自定義事件名',要傳送的數據);

　　   3. 接着使用 bus.vue

　　　   緊接着在我們另一個組件(這里指的是接收方)里：

　　　   備注：bus.$on('事件名',callback) ---------- callback即指回調$emit要傳送的數據；

import { bus } from 'bus.js'

created () { //監聽傳值
  bus.$on('myEvent', (mydata) => {
     this.mydata = mydata;
  })
}

　　　　 備注：若只想監聽一次事件 ，則使用bus.$once

　　　　注銷：bus.$off('myEvent', ~~~自己寫~~~);

　　　  步驟大致就這樣~

 

• 中大型項目：

　  推薦使用 Vuex ，

         解釋一波：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式；

　　　　　　　  vuex解決了組件之間同一狀態的共享問題  (解決了不同組件之間的數據共享) ，使組件里面的數據持久化。    

 

          1. 安裝vuex ：cnpm install vuex --save  (什么是cnpm就不解釋了，能學到Vuex的應該都了解cnpm了）

　　 2. 創建一個 vuex 文件夾，並在里面新建一個 store.js 寫入以下代碼：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

　　　   接着往下寫：

　　　   state 定義數據：state在vuex中用於存儲數據

//1.state在vuex中用於存儲數據
var state={ //存放數據，數據中心
    count:1，
    // 其他數據格式：orderList: [],
    // 其他數據格式：params: {}
}

　　       getters 類似計算屬性：

//2.
var getters= {
    computedCount: (state) => {
        return state.count*2
    }
}    

　　       mutations 定義方法：mutations里面放的是方法，方法主要用於改變state里面的數據

　　　　　　　  　　　　  同步操作，狀態更改 ,只允許mutations里進行state更改

//3.mutations里面放的是方法，方法主要用於改變state里面的數據
var mutations={
    incCount(){
    ++state.count;
    }
}    

　　　　action 定義方法：異步操作，Action 提交的是 mutation，而不是直接變更狀態。

//4.
var actions= {
　　incMutationsCount(context) {    /*因此你可以調用 context.commit 提交一個 mutation*/
　　　　context.commit('incCount');    /*執行 mutations 里面的incCount方法 改變state里面的數據*/
　　　　//此處按照實際情況擴展~
　　}
}

　　　　暴露！：暴露上面那四個~

const store = new Vuex.Store({
　　state,
　　mutations,
　　getters,
　　actions
})

export default store;

 

　　  3. 組件里去使用 Vuex：

(1).  獲取state里面的數據

　    this.$store.state.數據

(2).  獲取 getters里面方法返回的的數據 (一般vue 和 store 進行交互 用 $store.getters， getters的值放在計算屬性里，動態綁定在計算屬性computed里）

　    this.$store.getters.computedCount

(3).  觸發 mutations 改變 state里面的數據 (別記混了)

　    this.$store.commit('incCount');

(4). 觸發 actions里面的方法 (別記混了)

　   this.$store.dispatch('incMutationsCount');   ps:這個 incMutationsCount 會再去 執行 mutations 里面的incCount方法

 

　　  4. 在src下新建一個文件夾store，接着新建一個文件index.js來放store對象。記得在 main.js 里添加store

　　      main.js：

import store from './store/index'

new Vue({
  el: '#app',
  router,
  store,
  template: '<按你的寫/>',  
//第一層
  components: { 按你的寫 }  
})

            index.js：　

import Vuex from 'vuex'
import Vue from 'vue'
import storefrom './modules/store' //這個是我的store.js
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{ //模型
        store
    }
})

　　

　

大概就這樣~

這只是基礎步驟，詳細的要自己按照自己的詳細情況加~