vue3一个组件触发另外一个组件中(非父子组件使用 Vuex)定义的方法

如果你想要在非父子组件之间共享数据，使用 Vuex 是一个不错的选择。下面是几个步骤：

1. 安装 Vuex：

npm install vuex --save

2. 创建 Vuex 的 store：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    // 定义需要共享的状态
  },
  mutations: {
    // 定义修改状态的方法
  },
  actions: {
    // 定义触发 mutation 的异步方法
  },
  getters: {
    // 定义计算状态的方法
  }
});

export default store;

3. 在 Vue 项目的入口文件中，将 store 注册到应用中：

import { createApp } from 'vue';
import store from './store';

const app = createApp(App);

app.use(store);

4. 在需要调用方法的组件中，使用 Vuex 的 `commit` 方法触发 mutation：

export default {
  methods: {
    handleClick() {
      this.$store.commit('mutationName', data);
    }
  }
}

5. 在需要监听 mutation 并执行方法的组件中，使用 Vuex 的 `mapMutations` 方法将 mutation 映射为本地方法：

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['mutationName']),
    handleMutation(data) {
      this.mutationName(data);
    }
  }
}

这样，当触发 `mutationName` mutation 时，监听该 mutation 的组件中的 `handleMutation` 方法就会被执行。

你也可以使用 Vuex 的 `dispatch` 方法触发 action，使用 `mapActions` 方法将 action 映射为本地方法，以及使用 `mapGetters` 方法将 getter 映射为本地计算属性。