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

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

1. vm.$on(event,callback)

新建一个工具函数util.js,代码如下:

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

然后两个页面都引用它

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

被调用方:

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

2. vuex

新建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;
  import {mapAction} from 'vuex'
 methonds:{
       ...mapAction([
         'getList'
        functionA(){
             this.getList()

被调用方:

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