用vuex跨组件通信

在主页面要点击的方法里先写方法和保持第一个状态为true

     // 发布专利交易
          case 'm0019':
            this.$store.commit('changeReleaseState',{showRstatus:true})
            this.showPatent = false;
            this.showlTrade = false
            this.showDeal =true
            break;

在store的index.js里
在state里写下当前状态

 state:{
    dealStatus:true,//第一个要显示的页面
    showgpTrade:false,
    showpriceTrade:false,
    showmallTrade:false
  },
mutations:{
  changeReleaseState(state,obj){
      state.dealStatus = obj.showRstatus
      state.showgpTrade =obj.showgpTrade
      state.showpriceTrade = obj.showpriceTrade
      state.showmallTrade = obj.showmallTrade
    }
}

在组件里引用组件

<!--挂牌交易-->
    <gpTrading v-show="this.$store.state.showgpTrade"></gpTrading>

    <!--竞价交易-->
    <priceTrading v-show="this.$store.state.showpriceTrade"></priceTrading>

    <!--商城交易-->
    <mallTrading v-show="this.$store.state.showmallTrade"></mallTrading>

在组件要点击的方法里：

 toApply(pids){
          console.log(pids)
          switch(pids){
            case '2004':
              this.$store.commit('changeReleaseState',{showRstatus:false,showgpTrade:true,showpriceTrade:false,showmallTrade:false})
              break;
            case '2005':
              this.$store.commit('changeReleaseState',{showRstatus:false,showgpTrade:false,showpriceTrade:true,showmallTrade:false})
              break;
            case '2006':
              this.$store.commit('changeReleaseState',{showRstatus:false,showgpTrade:false,showpriceTrade:false,showmallTrade:true})
              break;
          }
        },

在组件里要显示的div里写

 <div class="rdeal-box"  v-show="this.$store.state.dealStatus">///这里！！！
      <div :class="[porel,fla,mat,'approve-show-title-style']">发布专利交易</div>
      <div :class="[porel,fla,'mp-right']">
        <div class="prompt">
          <div class="prompt-title">
            <ul>
              <li>请选择您需要的交易方式，每个专利只能发布一次</li>
              <li>为了保证您的信息能顺利通过我们的审核，请将信息的真实情况尽可能全面的发布出来！</li>
              <li>现接受完全转让与5年独占许可转让的专利技术可发布商城产品</li>
            </ul>
          </div>
          <div class="release-main">
            <div class="release-list" v-for="(i,index) in rList" :key="index+Math.random()">
              <div class="release-list-block">
                <img :src=i.rImg>
                <span>{{i.title}}</span>
              </div>
              <button class="release-btn" @click="toApply(i.pid)">立即发布</button>
            </div>
          </div>
        </div>


      </div>
    </div>