vue的公共js怎么写

在 Vue 中编写公共 JS 的方法主要包括创建全局混入、插件、或使用 Vuex 来管理状态。 其中，全局混入 是最常用的方式之一，因为它可以轻松地将某些功能注入到所有 Vue 组件中。以下是详细描述如何通过全局混入来编写公共 JS：

全局混入

全局混入是一种将功能注入到每一个 Vue 实例中的方式。通过 Vue.mixin 方法，你可以将公共方法、数据或生命周期钩子注入到所有组件中。例如，你可以创建一个公共的日志方法，将其注入到所有组件中。

// 创建一个公共的混入文件，比如 commonMixin.js
export const commonMixin = {
  methods: {
    logMessage(message) {
      console.log(message);
    }
  }
};
// 在 main.js 中全局注册混入
import Vue from 'vue';
import { commonMixin } from './commonMixin';
Vue.mixin(commonMixin);
new Vue({
  render: h => h(App),
}).$mount('#app');

详细描述：

全局混入的优势在于其简洁性和高效性，特别适合需要在多个组件中复用的方法或数据。上述例子中，我们定义了一个 commonMixin，其中包含一个 logMessage 方法。通过在 main.js 中使用 Vue.mixin 注册这个混入，logMessage 方法将自动注入到每一个 Vue 组件实例中。因此，你可以在任何组件中直接调用 this.logMessage('Hello, world!') 来记录日志。

一、使用插件

插件是一种更结构化的方式来扩展 Vue 的功能。你可以创建一个插件，将其注册到 Vue 实例中，从而在所有组件中使用插件提供的方法或属性。

// 创建一个插件文件，比如 myPlugin.js
const MyPlugin = {
  install(Vue) {
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log('MyPlugin method called', methodOptions);
    };
  }
};
export default MyPlugin;
// 在 main.js 中注册插件
import Vue from 'vue';
import App from './App.vue';
import MyPlugin from './myPlugin';
Vue.use(MyPlugin);
new Vue({
  render: h => h(App),
}).$mount('#app');

插件的优势在于其灵活性和可扩展性。通过定义一个 install 方法，你可以将任何功能添加到 Vue 原型链上，使得所有组件都可以通过 this.$myMethod 调用该方法。

二、使用 Vuex 管理公共状态

如果你需要在多个组件之间共享数据或状态，使用 Vuex 是一个很好的选择。Vuex 是一个专为 Vue.js 应用设计的状态管理模式，可以集中管理应用的所有状态。

// 安装 Vuex
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 创建一个 store.js 文件
export default new Vuex.Store({
  state: {
    message: 'Hello, Vuex!'
  },
  mutations: {
    setMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    updateMessage({ commit }, newMessage) {
      commit('setMessage', newMessage);
    }
  },
  getters: {
    message: state => state.message
  }
});
// 在 main.js 中注册 store
import store from './store';
new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

通过 Vuex，你可以轻松地在多个组件之间共享和管理状态。上述例子中，我们在 store.js 文件中定义了一个状态 message，并通过 mutations 和 actions 来更新该状态。所有组件都可以通过 this.$store.state.message 访问状态，或通过 this.$store.dispatch('updateMessage', 'New message') 更新状态。

三、创建公共工具函数

有时候你可能只需要一些简单的工具函数，而不需要将其注入到 Vue 实例中。这时候，你可以创建一个单独的工具函数文件，并在需要的地方导入使用。

// 创建一个工具函数文件，比如 utils.js
export function formatDate(date) {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return new Date(date).toLocaleDateString(undefined, options);
}
// 在组件中导入并使用
import { formatDate } from './utils';
export default {
  created() {
    console.log(formatDate(new Date()));
  }
};

四、使用第三方库

有时候，第三方库已经提供了你需要的功能。你可以直接在项目中引入这些库，并在组件中使用。例如，Lodash 是一个非常流行的 JavaScript 工具库，提供了很多实用的方法。

// 安装 Lodash
import _ from 'lodash';
export default {
  created() {
    const array = [1, 2, 3, 4, 5];
    console.log(_.shuffle(array));
  }
};

五、总结

在 Vue 中编写公共 JS 方法有多种方式，包括全局混入、插件、Vuex、工具函数和第三方库。选择哪种方式取决于你具体的需求和项目结构。全局混入适合需要在所有组件中复用的方法，插件适合扩展 Vue 的功能，Vuex 适合集中管理状态，工具函数适合简单的独立功能，第三方库则提供了现成的解决方案。通过合理地选择和组合这些方法，你可以编写出更简洁、可维护和可扩展的 Vue 应用。