A reactive service provider for Vue2
yarn add rx-srv -D
First, you should create a service
import RxService from 'rx-srv'
class UserService extends RxService {
public userName: string = 'Tom'
public userAge: number = 18
public userAddress = {
province: 'AnHui',
city: 'ChiZhou'
}
constructor() {
super('UserService');
super.observe()
}
public rename(name: string) { this.userName = name }
public growUp() { this.userAge ++ }
public updateProvince(province: string) { this.userAddress.province = province }
public updateCity(city: string) { this.userAddress.city = city }
}
const userService = new UserService()
export default userService
Finally, use it at page
<template>
<div id="app">
User Info:
<div>Name: {{userService.userName}}</div>
<div>Age: {{userService.userAge}}</div>
<div>Addr: {{userAddress}}</div>
<div>
<button @click="growUp">Grow Up</button>
</div>
</div>
</template>
<script lang="ts">
import { userService } from "@/service/user-service.ts";
export default {
computed: {
userAddress() {
return `${userService.userAddress.province} - ${userService.userAddress.city}`
}
},
methods: {
growUp() {
userService.growUp()
}
}
}
</script>
That is all, please have fun with rx-srv
- Support Watch API
Example:
@Service()
class UserService extends RxService {
public userAge: number = 18
constructor() {
super();
super.observe()
this.watch(() => this.userAge, (val) => {
console.warn('user age changed', val)
})
}
}
- Support Event Emitter
Example:
// emit an event
userService.next('logged', payload)
// listen an event
userService.on('logged', () => {
// do something after logged
})
// cancel an event
userService.off('logged')
// emit an event only once
userService.once('logged', payload)
- Fix lower vue version error