vuex数据传递

1、主页

//aiot.vue
import qdExceptionsCountry from './component/country-city-view/exceptions.vue'
//内容组件，并拥有点击弹框的click操作 
  <qd-exceptions-country />
//弹框组件
import qdExceptionsCountry from './component/country-city-view/exceptions.vue'


   <!-- 更多 弹框 -->
    <div v-if="rank == 'community'">
      <qd-more-exceptions />
      <qd-more-warning />
      <qd-more-workorder />
    </div>
    <div v-else>
      <qd-more-exceptions-country />
      <qd-more-warning-country />
      <qd-more-workorder-country />
    </div>

2、内容页

//exceptions.vue

   <div class="wrap-more" @click="showMore">更多<i class="more" /></div>

import { mapState, mapGetters, mapMutations } from 'vuex'
  methods: {
    ...mapMutations(['showExceptions']),
    showMore() {
      this.showExceptions()
    },
}

3、vuex

//index.js
import Vuex from 'vuex'
import Vue from 'vue'
const store = new Vuex.Store({

state:{
    showMoreWorkorder: false,
},
getters: {
    isDim: state => {
      return state.showMoreExceptions || state.showMoreWorkorder || state.showMoreWarning
    },
},
mutations:{
 showWorkorder(state) {
      state.showMoreWorkorder = true
    },
},
action:{

}
})

4showMoreExceptions

//moreExceptions.vue

<div class="qdDialog flex-center" @click.self="hide" v-show="showMoreExceptions">
</div>

//vuex，computed，watch结合使用
  computed: {
    ...mapState(['showMoreExceptions', 'rank']),//获取弹框弹框状态标识
    ...mapGetters(['projectId']),
  },
   watch: { //监听当弹框显示时，查询其他数据
    showMoreExceptions(val) {
      if(val){
        this.remark = ''
        this.selectedOptions = [],
        this.showConfirm = false
        this.getData()
        this.getMonthData()
        this.getListData()
        this.getOrderType()
      }
    }
  }