当前位置：首页 > VUE

vue实现单例

2026-01-17 04:11:19VUE

Vue 实现单例模式的方法

在 Vue 中实现单例模式可以通过多种方式，以下是几种常见的方法：

使用 Vue 实例作为单例

创建一个全局的 Vue 实例作为单例对象，通过 Vue 的响应式系统管理状态。

// 单例对象
const singleton = new Vue({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

// 使用单例
singleton.increment()
console.log(singleton.count) // 1

使用模块系统

利用 ES6 模块的特性，模块在首次导入时会被缓存，后续导入会返回相同的实例。

// singleton.js
let instance = null

export default {
  getInstance() {
    if (!instance) {
      instance = new Vue({
        data() {
          return {
            count: 0
          }
        }
      })
    }
    return instance
  }
}

// 使用单例
import Singleton from './singleton.js'
const singleton = Singleton.getInstance()

使用 Vuex 状态管理

Vuex 本身就是单例模式的应用，可以通过 Vuex 管理全局状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 使用单例
store.commit('increment')
console.log(store.state.count) // 1

使用插件系统

将单例对象作为 Vue 插件安装，可以在所有组件中通过 this.$singleton 访问。

// singleton-plugin.js
const Singleton = {
  install(Vue) {
    const singleton = new Vue({
      data() {
        return {
          count: 0
        }
      },
      methods: {
        increment() {
          this.count++
        }
      }
    })
    Vue.prototype.$singleton = singleton
  }
}

// 安装插件
Vue.use(Singleton)

// 使用单例
this.$singleton.increment()
console.log(this.$singleton.count) // 1