创建单例 LoginLayer.js
/**
* 例一:登陆类
*/
class LoginLayer {//定义一个登陆的类
constructor() {
this.instance = null//初始化这个实例化对象
}
show(itemVue) {
itemVue.isShow = true//处理逻辑
}
hide(itemVue) {
itemVue.isShow = false//处理逻辑
}
static getInstance() {//单例模式 只会new出一个实例化对象 如果已经有了 会返回之前new好的实例化对象
if (!this.instance) {
this.instance = new LoginLayer()
}
return this.instance
}
}
/**
* 例二:购物车类
*/
class ShopingCar {
constructor(){
this.count = 0
this.instance = null
}
add(){
this.count += 1
}
remove(){
this.count -= 1
}
static getInstance(){
if(!this.instance){
this.instance = new ShopingCar()
}
return this.instance
}
}
/**
* 工厂类
*/
class AllCalss {//工厂模式
TLogionLayer(){//定义一个方法返回登陆的实例对象
return LoginLayer.getInstance()//直接类名点静态方法名可调用静态方法
}
TShopingCar(){
return ShopingCar.getInstance()
}
}
/**
* 创建工厂类的实例对象
*/
const allclass = new AllCalss()//new出工厂类的实例对象
export const loginlayer = allclass.TLogionLayer()//导出登录的方法
export const shopingcar = allclass.TShopingCar()//导出购物车方法
Vue中使用单例 danlie.vue
<template>
<div>
<div>例一:登录框</div>
<div v-show="isShow" class="login-layer">我是登录框</div>
<div @click="hideBtn" v-show="isShow">隐藏登录框</div>
<div @click="showBtn">我是按钮</div>
<hr/>
<div>例二:购物车</div>
<div>当前购物车商品数量: {{count}}</div>
<div @click="add">增加一件商品</div>
<div @click="remove">减少一件商品</div>
<div @click="goOtherPage">跳转到另外一页进行测试</div>
</div>
</template>
<script>
import {loginlayer, shopingcar} from '../util/LoginLayer' //引入刚导出的方法
export default {
data(){
return{
isShow: false,
count: null
}
},
methods:{
showBtn(){//显示登陆窗口
loginlayer.show(this)
},
hideBtn(){//隐藏登陆窗口
loginlayer.hide(this)
},
add(){//增加商品
shopingcar.add()
this.count = shopingcar.count
},
remove(){//减少商品
shopingcar.remove()
this.count = shopingcar.count
},
goOtherPage(){//跳转到其它页面
this.$router.push({'name': 'Danlie2'})
}
},
created(){
this.count = shopingcar.count//初始化count
}
}
</script>
<style>
.login-layer {
200px;
height: 200px;
background-color: rgba(0, 0, 0, .6);
text-align: center;
line-height: 200px;
display: inline-block;
color: #fff;
}
</style>
Vue中使用单例 danlie2.vue
<template>
<div>
<div>当前购物车商品数量: {{count}}</div>
<div @click="add">增加一件商品</div>
<div @click="remove">减少一件商品</div>
<div @click="goBack">返回上一页</div>
</div>
</template>
<script>
import {shopingcar} from '../util/LoginLayer'
export default {
data(){
return{
count: null
}
},
methods: {
add(){
shopingcar.add()
this.count = shopingcar.count
},
remove(){
shopingcar.remove()
this.count = shopingcar.count
},
goBack(){
this.$router.go(-1)
}
},
created(){
this.count = shopingcar.count
}
}
</script>
总结:
当我们使用单例模式时,只会new出一个实例对象,该对象的初始值都会共享,每次改变该值,其它页面如果使用该值的,相应也会发生变化