vue全局方法的调用

在Vue.js中，全局函数是定义在整个应用程序中的函数，可以在任何地方调用，这些函数通常用于处理一些通用的任务，如数据处理、验证等，在Vue.js中，我们可以通过以下几种方式来调用全局函数：

1、在Vue实例中定义全局函数

我们需要在Vue实例中定义一个全局函数，这可以通过在Vue实例的methods对象中添加一个方法来实现，我们可以定义一个名为globalFunction的全局函数，用于处理一些通用的任务：

new Vue({
  el: 'app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    globalFunction: function() {
      console.log('这是一个全局函数');
    }
  }
});

接下来，我们可以在任何组件或模板中调用这个全局函数，要做到这一点，我们需要使用this关键字来引用Vue实例，然后调用其globalFunction方法：

<template>
  <div>
    <button @click="globalFunction">点击我</button>
  </div>
</template>

2、在Vue插件中定义全局函数

除了在Vue实例中定义全局函数外，我们还可以在Vue插件中定义全局函数，插件是一种用于扩展Vue功能的方法，它们可以包含自定义的选项和功能，要在插件中定义全局函数，我们需要创建一个插件对象，并在其中添加一个方法：

const myPlugin = {
  install(Vue, options) {
    Vue.prototype.$globalFunction = function() {
      console.log('这是一个全局函数');
    };
  }
};

接下来，我们需要将这个插件添加到我们的Vue应用程序中，这可以通过在创建Vue实例时使用Vue.use()方法来实现：

new Vue({
  el: 'app',
  data: {
    message: 'Hello Vue!'
  },
  plugin: myPlugin, // 添加插件到Vue实例中
  methods: {
    callGlobalFunction: function() {
      this.$globalFunction(); // 调用全局函数
    }
  }
});

现在，我们可以在任何组件或模板中调用这个全局函数，要做到这一点，我们需要使用this关键字来引用Vue实例，然后调用其$globalFunction方法：

<template>
  <div>
    <button @click="callGlobalFunction">点击我</button>
  </div>
</template>

3、在Vuex store中定义全局函数

Vuex是一个用于管理Vue应用程序的状态库，我们可以在Vuex store中定义全局函数，以便在整个应用程序中使用，要在Vuex store中定义全局函数，我们需要创建一个模块，并在其中添加一个mutation：

const globalMutations = {
  callGlobalFunction: function(state) {
    console.log('这是一个全局函数');
  }
};

接下来，我们需要将这个模块添加到我们的Vuex store中，这可以通过在创建store时使用modules选项来实现：

const store = new Vuex.Store({
  state: {
    message: 'Hello Vue!'
  },
  mutations: globalMutations, // 添加模块到Vuex store中
  actions: {
    callGlobalFunction: function(context) {
      context.commit('callGlobalFunction'); // 调用全局函数的mutation
    }
  }
});

现在，我们可以在任何组件或模板中调用这个全局函数，要做到这一点，我们需要使用mapActions辅助函数来映射我们的callGlobalFunction action：

import { mapActions } from 'vuex';
export default {
  computed: { ...mapState(['message']) }, // 映射状态到计算属性和方法中
  methods: { ...mapActions(['callGlobalFunction']) }, // 映射action到方法中
};

我们可以在模板中使用callGlobalFunction方法来调用全局函数：

<template>
  <div>
    <button @click="callGlobalFunction">点击我</button>
  </div>
</template>