vue一个页面触发另一个同级页面的方法

今天总结一下，两个页面不嵌套，兄弟组件的情况下，如何调用另一个页面的方法

方法一：vm.$on(event,callback)

1.新建一个工具函数bus.js，代码如下：

import Vue from 'vue'
export default new Vue;

2.然后两个页面都引用它

import bus from './bus'

被调用方：

mounted(){
    util.$on('test',(msg)=>{
        console.log(msg);
        this.getData();
    })
},
methonds:{
    getData(){
     console.log('执行getData代码')   
    }
},

调用方：

methonds:{
    async addApp(val){
        await addApp({val}).then( (res) => {
            if(res.status){
                this.$message("操作成功")
                //触发兄弟页面的方法getData
                bus.$emit('test','01')
            }
        })
    }
}

方法二：vuex

1.新建store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 
const store = new Vuex.Store({
    state: {
       list:[]
    },
    mutations: {
        setList(state,payload){
            state.list = payload
        }
    },
    actions: {
        getList({commit}){
            getList().then(res=>{
                commit('setList',res.data)
            })
        }
    }
});
 
export default store;

2.使用

被调用方：

import {mapAction,mapState} from 'vuex'
 
computed:{
  ...mapState([
    'list'
  ])  
},
methonds:{
    ...mapAction([
        'getList'
    ])
},
mounted(){
    this.getlist()
}

调用方：

import {mapAction} from 'vuex'
 
methonds:{
    ...mapAction([
        'getList'
    ]),
    functionA(){
        this.getList()
    }
}