vue A页面更新B页面数据

应用场景：全局定时刷新订单状态，等有待处理订单时，进行弹框提示，同时如果在订单列表的话，也有待处理订单状态，进行列表数据更新。

通过vuex 获取被更新页面的this实例化实现

1. store/modules新建个文件，我这里命名为：updateOrderList.js (获取指定页面的this实例化对象)

const state = function() {
  return {
    pageThis: '', // 组件实例
    pagePaths: ['/canteen/orderManage/list'], // 需要更新数据的组件路径
    timerTime: 1000 * 30,
    timerAction: null // 定时器
  }
}

const mutations = {
  // 更新pageThis
  updateThisMutation(state, that) {
    console.log(state)
    state.pageThis = that
  }
}

const actions = {
  // 获取组件this
  getComponentThisAction(context, that) {
    const path = that.$route.path
    const pagePaths = context.state.pagePaths

    if (pagePaths.includes(path)) {
      context.commit('updateThisMutation', that)
      if (context.state.timerAction) {
        return
      }
    }
  }
}

export default {
  namespaced: true,
  state: state,
  mutations: mutations,
  actions: actions
}

2.store/index.js下引入该文件：

import updateOrderList from './modules/updateOrderList'
const store = new Vuex.Store({
	updateOrderList
})

3.在需要更新的页面进行vuex方法引用（我这边定义为orderManage.vue文件）：

import { mapActions } from 'vuex'
mounted() {
  this.getComponentThisAction(this) // 调用vuex方法用于获取实例化
},
beforeDestroy() {
    this.getComponentThisAction('') // 离开页面时销毁实例化
},
methods: {
    ...mapActions('updateOrderList', ['getComponentThisAction'])
})

4.在需要点击更新的地方进调用（我这边放在了侧边栏）

import store from '@/store'
mounted() {
	this.loadNewOrderData()
},
methods: {
  loadNewOrderData() {
    setTimeout(() => {
      this.$message({
        message: '数据更新了'
      })
      const pageThis = store.state.updateOrderList.pageThis
      if (pageThis && pageThis.$route.path === '/canteen/orderManage/list') {
        pageThis.getOrderList(pageThis.currentPage)
      }
      this.loadNewOrderData()
    }, 5000)
  }
}

每日一语：
其实无论你活成什么样子，都会有人说三道四，这个世界我们只来一次,吃想吃的东西,见想见的人,看喜欢看的风景，做喜欢做的事，不要在闲言碎语中迷失自己 。