单例模式

单例模式确保一个类只有一个实例，并提供一个全局访问点来获取该实例。在 Vue 应用中，单例可以用于存储和管理全局状态、共享资源或提供全局服务。

优点

1. 全局数据共享：方便在整个应用的不同组件之间共享数据，无需通过 props 或事件进行复杂的传递。

   • 例如，一个全局的用户信息单例，各个组件都能轻松获取当前登录用户的信息。

2. 资源高效利用：避免创建多个相同功能的对象，节省系统资源。

   • 比如一个数据库连接单例，避免重复创建连接。

3. 统一管理：对某些全局配置或规则进行集中管理和控制。

缺点

1. 紧耦合：使用单例可能导致组件之间的耦合度过高，不利于代码的模块化和可维护性。

   • 若单例的逻辑发生变化，可能影响众多依赖它的组件。

2. 测试困难：由于其全局性质，在单元测试中难以模拟和隔离。

   • 对依赖单例的组件进行测试时，需要特殊处理单例的行为。

3. 隐藏依赖：代码的使用者可能不清楚某个功能依赖于单例，导致理解和使用上的困惑。

代码实例

代码实例 1：简单的全局状态单例

let globalState = null;

function getGlobalState() {
  if (!globalState) {
    globalState = {
      count: 0
    };
  }
  return globalState;
}

Vue.component('Component1', {
  methods: {
    incrementCount() {
      const state = getGlobalState();
      state.count++;
    }
  },
  template: '<button @click="incrementCount">Increment</button>'
});

Vue.component('Component2', {
  computed: {
    count() {
      return getGlobalState().count;
    }
  },
  template: '<div>{{ count }}</div>'
});

在上述示例中，getGlobalState 函数用于获取全局状态的单例对象，两个组件可以对其进行操作和访问。

代码实例 2：全局配置单例

let globalConfig = null;

function getGlobalConfig() {
  if (!globalConfig) {
    globalConfig = {
      theme: 'light',
      fontSize: 16
    };
  }
  return globalConfig;
}

Vue.component('Component3', {
  created() {
    const config = getGlobalConfig();
    // 根据配置设置组件的样式
    this.$el.style.fontSize = config.fontSize + 'px';
  },
  template: '<div>Component 3</div>'
});

这个例子中，通过单例存储全局的配置信息，组件可以根据配置进行相应的初始化操作。

代码实例 3：服务型单例

let dataService = null;

function getDataService() {
  if (!dataService) {
    dataService = {
      fetchData(url) {
        // 模拟数据获取
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({ data: 'fetched data' });
          }, 1000);
        });
      }
    };
  }
  return dataService;
}

Vue.component('Component4', {
  methods: {
    getData() {
      const service = getDataService();
      service.fetchData('/api/data').then((data) => {
        console.log(data);
      });
    }
  },
  template: '<button @click="getData">Get Data</button>'
});

这里创建了一个用于数据获取的服务单例，组件可以调用其方法获取数据。