巧妙地解决使用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~