在Vue.js中创建公三种方法_不适合复杂应用_安装Vuex使用npm或yarn安装Vuex

作者：机器人技术佬 | 发布时间：2025-07-09 |

在Vue.js中创建公共JS变量的三种方法

在Vue.js中，我们有时候需要在多个组件间共享一些变量或配置，下面就来聊聊三种常用的方法。

一、在Vue原型链上添加全局变量

这方法简单直接，就像在Vue的原型上挂一个属性，然后在任何组件里都能访问它。

优点 缺点
简单直接，适合小型项目或简单需求。 变量无法响应式更新，不适合复杂应用。可能会造成命名冲突和难以管理。

二、使用Vuex进行状态管理

Vuex就像是Vue的一个大脑，集中管理所有组件的状态，让状态的变化更加可预测。

  1. 安装Vuex：使用npm或yarn安装Vuex。
  2. 创建store：定义你的状态、 mutations、actions、getters等。
  3. 在main.js中引入store：把store添加到Vue实例中。
  4. 在组件中使用store：通过store.dispatch、store.commit、store.getters来操作或访问状态。
优点 缺点
变量是响应式的，可以在多个组件中共享和更新。适合大型应用，状态管理更加清晰和可维护。 需要学习和理解Vuex的使用。增加了一些复杂性。

三、创建一个单独的配置文件

这种方法适用于存储一些不会变化的配置项或常量。

  1. 创建配置文件：创建一个.js文件，比如`config.js`。
  2. 在组件中引入配置文件：使用`import`语句引入配置文件，并使用其中的变量。
优点 缺点
适合存储一些常量或配置项。简单易用，不需要引入额外的库。 变量无法响应式更新，不适合需要动态更新的场景。

总结来说，根据你的项目需求和复杂度选择合适的方法，可以帮助你更好地管理Vue.js应用中的公共变量。