巧妙地解決使用vuex無法傳值給兄弟組件的子組件中去的問題

衆所周知，官網上面都是說，vuex是進行兄弟組件間的傳值的好方法，然而兄弟組件是能夠傳值了，但是如果是還關係到父子組件的話，使用vuex就不行了，例如下面的例子：

    首先，先貼出我的目錄結構如下：

然後我在viewTicket.vue組件裏面加入了date.vue組件，代碼如下：

在header.vue組件裏面加入了station.vue組件，代碼如下：

接着，分別貼出vuex、data組件、station組件的相關代碼如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  // 定義狀態
  state: {
    countDown: '',
    resetAccount: '',
    userLogin: false,
    searchInfo: {
      date: '',
      station: '',
    },
  },
  mutations: {
    newCountDown(state, msg){
      state.countDown = msg;
    },
    newResetAccount(state, msg){
      state.resetAccount = msg;
    },
    setUserLogin(state, msg){
      state.userLogin = msg;
    },
    setSearchInfo(state, object){
      state.searchInfo.date = object.date;
      state.searchInfo.station = object.station;
    },
  }
});

export default store

        賦值的代碼如下：

            let info = {
              date: date,
              station: station,
            }
            self.$store.commit('setSearchInfo', info);

        組件裏面獲取值的代碼如下：

好，一切準備就緒，下面貼出我前端頁面的執行情況：

沒錯，很神奇，對吧？之後，查了一系列網上的文章，貌似是因爲不只是跨了一個組件，還涉及到了傳值到了兄弟組件的子組件 裏面去，所以那個兄弟組件的子組件 （station.vue）就獲取不到值了。網上的解決方法是要在header組件那裏再進行下父子組件間的傳值操作才能夠顯示。

那有沒有更簡便的操作呢？答案是有的（以下是重點）

只需在station.vue組件中添加代碼如下：

先直接上頁面效果圖：

沒錯，就是這麼地簡單粗暴，不需要增加額外過多的代碼就解決了這個技術難題。

以上內容如有問題，歡迎點評，謝謝瀏覽~O(∩_∩)O~