vuex 操作提示 以及通过vuex 实现全局事件跨组件传值

首先在store的一个模块内

const getDefaultState = () => {
  return {
    serveInfo:'',//加入我们需要保存的东西
  }
}

声明一个大的state方便查找

const state = getDefaultState()

在方法内加入我们需要的方法

const mutations = {
  SET_SERVEINFO: (state, serveInfo) => {
    state.serveInfo = serveInfo
  },
}

在action内加入 我们的方法可在外部调用

const actions = {
serveChange({ commit, state }, serve){
    commit('SET_SERVEINFO', serve)
  },
}

在A组件里写个事件

 test(){
      console.log(10);
      this.total++
      this.$store
        .dispatch("user/serveChange",this.total)
    },

然后在B组件内 通过computed引入对应store参数

computed: {
     serveData() {
      return this.$store.state.user.serveInfo
    }
  },

通过watch监听

watch: {
     serveData(newVal, oldVal) {
 // 此处处理逻辑
     console.log("vuex改变了 触发事件");
     //写对应的方法ok了
 }
  },

这样 A内修改了 这个值 不管B组件和A组件什么关系 都能传参了

快速访问用的getter

const getters = {
  vacate: state => state.vacate.vacateLayer
}
export default getters

模块

const vacate = {
  namespaced: true,
  //可用外部getter访问
  state: {
    vacateLayer: [] // 腾退大屏 层级
  },
  //通action调用
  mutations: {
    SET_VACATELAYER(state, data) {
      console.log('set', data)
      if (Array.isArray(data)) {
        state.vacateLayer = state.vacateLayer.concat(data)
      } else {
        state.vacateLayer.push(data)
      }
    },
  },
   //外部调用用这里 dispatch
  actions: {
    setVacateLayer({ commit }, data) {
      return new Promise((resolve, reject) => {
        try {
          commit('SET_VACATELAYER', data)
          resolve()
        } catch (err) {
          reject(err)
        }
      })
    },
    removeVacateLayer({ commit }) {
      return new Promise(async(resolve, reject) => {
        try {
          await commit('REMOVE_VACATELAYER')
          resolve()
        } catch (err) {
          reject(err)
        }
      })
    },
    clearVacateLayer({ commit }) {
      return new Promise((resolve, reject) => {
        try {
          commit('CLEAR_VACATELAYER')
          resolve()
        } catch (err) {
          reject(err)
        }
      })
    }
  }
}
//命名空间
export default vacate