js单例模式

保证一个类只有一个实例,并提供一个访问它的全局访问点

实现

静态方法实现

js 复制代码
class SingleTon{

  

    //全局的访问点

    static getInstance(){

        // 保证一个类只有一个实例

        if(!this.instance)

        {

            this.instance=new SingleTon()

        }

        return this.instance

    }

  
  

}

  

let a=SingleTon.getInstance()

let b=SingleTon.getInstance()

  

console.log(a==b); //true

闭包实现

js 复制代码
  

//2.闭包实现

function SingleTonBase(name)

{

    this.name=name

    console.log("构造函数::",name);

}

function getInstance()

{

    let instance = null;

    return function(name){

        if(!instance)

        {

            instance = new SingleTonBase(name)

        }

        return instance

    }

}

  
  

let SingleTon=getInstance()

  

let a=SingleTon("aaaa")

let b=SingleTon("bbb")

//构造函数:: aaaa

console.log(a==b); //true

Pinia中的单例模式

在Pinia中,单例模式的实现是通过defineStore函数来完成的。

这个函数接受一个唯一的字符串作为参数,用于标识store。 当defineStore函数被调用时,它会执行以下步骤:

  1. 首先,defineStore函数会检查是否已经存在一个具有相同标识的store实例。如果已经存在,则直接返回该实例。
  2. 如果不存在,则defineStore函数会创建一个新的store实例。这个实例是一个单例对象,在整个应用程序中是唯一的。
  3. 接下来,defineStore函数会为store实例添加一些属性和方法,例如stateactionsgetters等。这些属性和方法用于定义store的状态、行为和计算属性。
  4. 最后,defineStore函数会返回新创建的store实例。 通过这种方式,Pinia能够在整个应用程序中共享状态,并且保证了状态的一致性和可预测性。同时,单例模式也使得状态的管理更加简单和易于维护。
相关推荐
morning_judger1 分钟前
【Python学习系列】数据类型(二)
开发语言·python·学习
傻小胖2 分钟前
react的statehook useState Hook详细使用
前端·javascript·react.js
兩尛25 分钟前
Web后端开发总结(day14)
java·开发语言
微臣酒驾来迟27 分钟前
el-descriptions-item使用span占行不生效
前端·javascript·vue.js
电子云与长程纠缠28 分钟前
UE5中制作地形材质
开发语言·缓存·ue5·编辑器·材质
froginwe1131 分钟前
《DOM NodeList》
开发语言
lly20240640 分钟前
XML 解析器:深入解析与高效应用
开发语言
明月看潮生1 小时前
青少年编程与数学 02-006 前端开发框架VUE 22课题、状态管理
前端·javascript·vue.js·青少年编程·编程与数学
Front_Yue1 小时前
Vue虚拟DOM:如何提高前端开发效率
前端·javascript·vue.js
Super毛毛穗1 小时前
Vue3学习总结
javascript·vue.js·学习