Vue.js如何在一个页面调用另一个同级页面的方法

实际开发过程中，当前组件调用完方法之后，也许会调取同一级组件中的方法，本人暂时想到两种办法:

1. vm.$on(event,callback)

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

   import Vue from 'vue'
   export default new Vue;
   复制代码

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

   import util from './util'
   复制代码

   调用方：

   methonds:{
       functionA(){
           util.$emit('test','test')
       }
   }
   复制代码

   被调用方：

   methonds:{
       functionB(){
           
       }
   },
   mounted(){
       util.$on('test',(test)=>{
           console.log(test);
           this.functionB();
       })
   }
   复制代码

2. 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} from 'vuex'
   
   methonds:{
       ...mapAction([
           'getList'
       ]),
       functionA(){
           this.getList()
       }
   }
   复制代码

   被调用方：

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