当前位置：首页 > VUE

vue实现单例

2026-02-17 20:38:28VUE

Vue 实现单例模式的方法

在 Vue 中实现单例模式通常用于确保某个对象或组件在应用中仅有一个实例。以下是几种常见实现方式：

使用 Vue 插件机制

通过 Vue 插件将单例对象挂载到 Vue 原型上，全局共享同一个实例。

vue实现单例

// Singleton.js
const Singleton = {
  data: {},
  methods: {
    setData(key, value) {
      this.data[key] = value;
    },
    getData(key) {
      return this.data[key];
    }
  }
};

export default {
  install(Vue) {
    Vue.prototype.$singleton = Singleton;
  }
};

// main.js
import Singleton from './Singleton';
Vue.use(Singleton);

使用模块系统

利用 ES6 模块的单例特性，直接导出一个实例。

vue实现单例

// singleton.js
class Singleton {
  constructor() {
    this.data = {};
  }

  setData(key, value) {
    this.data[key] = value;
  }

  getData(key) {
    return this.data[key];
  }
}

export default new Singleton();

// 组件中使用
import singleton from './singleton';
singleton.setData('key', 'value');

全局状态管理 (Vuex)

通过 Vuex 的状态管理实现单例效果，共享全局状态。

// store.js
export default new Vuex.Store({
  state: {
    singletonData: {}
  },
  mutations: {
    setSingletonData(state, { key, value }) {
      state.singletonData[key] = value;
    }
  },
  getters: {
    getSingletonData: state => key => state.singletonData[key]
  }
});

// 组件中使用
this.$store.commit('setSingletonData', { key: 'test', value: 123 });
const data = this.$store.getters.getSingletonData('test');

单例组件实现

通过 Vue 的 keep-alive 和动态组件实现单例组件。

<template>
  <keep-alive>
    <component :is="currentComponent" v-if="showComponent"></component>
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'MySingletonComponent',
      showComponent: true
    };
  }
};
</script>