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：

 ''importstore 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
    }
})

　　

　

大概就這樣~

這只是基礎步驟，詳細的要本身按照本身的詳細狀況加~