feat: 增加app获取

docs/index.md

@@ -1 +1 @@
-# Hello VitePress
+# vue3 oop

example/api/http.ts

@@ -1,18 +1,7 @@
 import axios from 'axios'
-import type { App } from 'vue'
-import { UserService } from '../module/auth/user.service'
 
 export const http = axios.create()
-let app: App | undefined = undefined
-export function setupHttp(obj: App) {
-  app = obj
-}
-
-http.interceptors.request.use((config) => {
-  const userService = app?.getService(UserService)
-  console.log(userService)
-  return config
-})
+export const HTTP_CLIENT = Symbol()
 
 export function login() {
   return http.get('/login')

example/app.tsx

@@ -0,0 +1,41 @@
+import { Component } from '@/di'
+import { VueComponent } from '@/index'
+import { UserService } from './module/auth/user.service'
+import { Button, Col, ConfigProvider, Row } from 'ant-design-vue'
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
+import { RouterView } from 'vue-router'
+import { RouterService } from './router/router.service'
+import { http, HTTP_CLIENT } from './api/http'
+import { CountService } from './count.service'
+
+@Component({
+  providers: [UserService, RouterService, { provide: HTTP_CLIENT, useValue: http }, CountService],
+})
+export class App extends VueComponent {
+  constructor(
+    private userService: UserService,
+    private routerService: RouterService,
+    private countService: CountService,
+  ) {
+    super()
+  }
+  render() {
+    return (
+      <ConfigProvider locale={zhCN}>
+        <h2 style={{ textAlign: 'center' }}>全局服务</h2>
+        <Row justify={'center'}>
+          <Col>
+            <Button type={'primary'} onClick={this.countService.add}>
+              加
+            </Button>
+            <span style={{ fontSize: '24px', margin: '0 20px' }}>{this.countService.count}</span>
+            <Button type={'primary'} danger onClick={this.countService.remove}>
+              减
+            </Button>
+          </Col>
+        </Row>
+        <RouterView></RouterView>
+      </ConfigProvider>
+    )
+  }
+}

example/count.service.ts

@@ -0,0 +1,15 @@
+import { Autobind, Ref, VueService } from '@/index'
+
+export class CountService extends VueService {
+  @Ref() count = 0
+
+  @Autobind()
+  add() {
+    this.count++
+  }
+
+  @Autobind()
+  remove() {
+    this.count--
+  }
+}

example/layout/default.layout.tsx

@@ -1,4 +1,4 @@
-import { VueComponent } from '@/extends/component'
+import { VueComponent } from '@/index'
 import { RouterView } from 'vue-router'
 
 export default class DefaultLayout extends VueComponent {

example/main.tsx

@@ -1,32 +1,8 @@
 import '@abraham/reflection'
 import { createApp } from 'vue'
-import { VueComponent } from '@/extends/component'
-import { RouterView } from 'vue-router'
-import { setupRouter } from './router'
-import { Component } from '@/di'
-import { UserService } from './module/auth/user.service'
 import './theme/app.css'
 import 'ant-design-vue/dist/antd.css'
-import { Button, ConfigProvider, Table } from 'ant-design-vue'
-import zhCN from 'ant-design-vue/es/locale/zh_CN'
-import { setupHttp } from './api/http'
-
-@Component({ autoResolveDeps: true, globalStore: true })
-class App extends VueComponent {
-  constructor(private userService: UserService) {
-    super()
-  }
-  render() {
-    return (
-      <ConfigProvider locale={zhCN}>
-        <h2 style={{ textAlign: 'center' }}>全局服务</h2>
-        <RouterView></RouterView>
-      </ConfigProvider>
-    )
-  }
-}
+import { App } from './app'
 
 const app = createApp(App)
-setupRouter(app)
-setupHttp(app)
 app.mount('#app')

example/module/auth/login.view.tsx

@@ -1,14 +1,21 @@
-import { VueComponent } from '@/extends/component'
-import { Component } from '@/di'
+import { Component, VueComponent } from '@/index'
 import { UserService } from './user.service'
 import { Button, Col, Form, Input, Row } from 'ant-design-vue'
 import { Ref } from '@/decorators/ref'
 import { CatchLoading } from '../../common/decorators/catch.decorator'
 import { Autobind } from '@/helper'
+import { CountService } from '../../count.service'
+import { SkipSelf } from 'injection-js'
 
-@Component()
+@Component({
+  providers: [CountService],
+})
 export default class LoginView extends VueComponent {
-  constructor(private userService: UserService) {
+  constructor(
+    private userService: UserService,
+    @SkipSelf() private parentCountService: CountService,
+    private countService: CountService,
+  ) {
     super()
   }
   @Ref() loading = false
@@ -31,6 +38,20 @@ export default class LoginView extends VueComponent {
     return (
       <Row type={'flex'} justify={'center'} align={'middle'} style={{ height: '80%' }}>
         <Col span={12}>
+          <h3 style={{ textAlign: 'center' }}>全局的状态: {this.parentCountService.count}</h3>
+          <h3 style={{ textAlign: 'center' }}>局部的状态</h3>
+          <Row justify={'center'}>
+            <Col>
+              <Button type={'primary'} onClick={this.countService.add}>
+                加
+              </Button>
+              <span style={{ fontSize: '24px', margin: '0 20px' }}>{this.countService.count}</span>
+              <Button type={'primary'} danger onClick={this.countService.remove}>
+                减
+              </Button>
+            </Col>
+          </Row>
+          <br />
           <Form labelCol={{ span: 6 }} model={this.model} rules={this.rules} onFinish={this.submit}>
             <Form.Item label={'用户名'} name={'name'}>
               <Input v-model={[this.model.name, 'value']}></Input>

example/module/auth/user.service.ts

@@ -1,24 +1,40 @@
-import { VueService } from '@/extends/service'
-import { Injectable } from 'injection-js'
+import { Hook, Ref, VueService } from '@/index'
+import { Inject, Injectable } from 'injection-js'
 import { RouterService } from '../../router/router.service'
-import { Ref } from '@/index'
+import { AxiosInstance } from 'axios'
+import { HTTP_CLIENT } from '../../api/http'
 
 @Injectable()
 export class UserService extends VueService {
-  constructor(private routerService: RouterService) {
+  constructor(private routerService: RouterService, @Inject(HTTP_CLIENT) private httpService: AxiosInstance) {
     super()
+    this.guardHttp()
     this.guardRouter()
   }
-  @Ref() token?: string
+  @Ref() token = ''
+
+  private _requestGuard: number
+
+  guardHttp() {
+    this._requestGuard = this.httpService.interceptors.request.use((config) => {
+      return config
+    })
+  }
 
   guardRouter() {
     this.routerService.router.beforeEach(async (to, from) => {
       if (to.path === '/login' && this.token) return { path: '/' }
       if (to.path !== '/login' && !this.token) return { path: '/login' }
     })
   }
+
+  @Hook('BeforeUnmount')
+  unmount() {
+    this.httpService.interceptors.request.eject(this._requestGuard)
+  }
+
   async login(model: any) {
-    this.token = await new Promise((resolve) => setTimeout(resolve, 3000, 'token'))
-    this.routerService.router.replace('/')
+    this.token = await new Promise((resolve) => setTimeout(resolve, 1000, 'token'))
+    await this.routerService.router.replace('/')
   }
 }

example/module/home/home.view.tsx

@@ -1,7 +1,44 @@
-import { VueComponent } from '@/extends/component'
+import { Component, VueComponent } from '@/index'
+import { CountService } from '../../count.service'
+import { Optional, SkipSelf } from 'injection-js'
+import { Button, Col, Row } from 'ant-design-vue'
+import { watch } from 'vue'
 
+@Component({
+  providers: [CountService],
+})
 export default class HomeView extends VueComponent {
+  constructor(
+    @SkipSelf() private parentCountService: CountService,
+    private countService: CountService,
+    @Optional() private aaa: string,
+  ) {
+    super()
+    watch(
+      () => this.parentCountService.count,
+      () => (countService.count = parentCountService.count),
+      {
+        immediate: true,
+      },
+    )
+  }
   render() {
-    return <div>home</div>
+    return (
+      <>
+        <h3 style={{ textAlign: 'center' }}>全局的状态: {this.parentCountService.count}</h3>
+        <h3 style={{ textAlign: 'center' }}>局部的状态</h3>
+        <Row justify={'center'}>
+          <Col>
+            <Button type={'primary'} onClick={this.countService.add}>
+              加
+            </Button>
+            <span style={{ fontSize: '24px', margin: '0 20px' }}>{this.countService.count}</span>
+            <Button type={'primary'} danger onClick={this.countService.remove}>
+              减
+            </Button>
+          </Col>
+        </Row>
+      </>
+    )
   }
 }

example/router/router.service.ts

@@ -1,7 +1,22 @@
 import { Injectable } from 'injection-js'
-import { useRouter } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from './routes'
+import { getCurrentApp, VueService } from '@/index'
 
 @Injectable()
-export class RouterService {
-  router = useRouter()
+export class RouterService extends VueService {
+  history = createWebHistory()
+  router = createRouter({
+    history: this.history,
+    routes: routes,
+  })
+  app = getCurrentApp()!
+  get currentRoute() {
+    return this.router.currentRoute.value
+  }
+
+  constructor() {
+    super()
+    this.app.use(this.router)
+  }
 }

src/decorators/computed.ts

@@ -8,7 +8,7 @@ interface ComputedItem {
 }
 
 const MetadataKey = Symbol('Computed')
-export function Computed() {
+export function Computed(): MethodDecorator {
   return function (target: any, key: string | symbol) {
     let list: (string | symbol)[] = Reflect.getMetadata(MetadataKey, target) || []
     list = list.slice()

src/decorators/hook.ts

@@ -36,7 +36,7 @@ type Lifecycle =
 
 const MetadataKey = Symbol('Hook')
 
-export function Hook(lifecycle: Lifecycle) {
+export function Hook(lifecycle: Lifecycle): MethodDecorator {
   return function (target: any, key: string | symbol) {
     let list: HookItem[] = Reflect.getMetadata(MetadataKey, target) || []
     list = list.slice()

src/decorators/ref.ts

@@ -6,7 +6,6 @@ const MetadataKey = Symbol('Ref')
 export function Ref(): PropertyDecorator {
   return function (target: any, key: string | symbol) {
     let list: (string | symbol)[] = Reflect.getMetadata(MetadataKey, target) || []
-    // 处理原型链上的数据
     list = list.slice()
     const hasItem = list.find((k) => k === key)
     if (!hasItem) list.push(key)

src/di/index.ts

@@ -6,8 +6,8 @@ const MetadataKey = Symbol('Component')
 
 declare module 'vue' {
   interface App {
-    getStore(): ReflectiveInjector
-    getService: ReflectiveInjector['get']
+    getStore(): any
+    getService(token: any): any
   }
 }
 
@@ -30,7 +30,7 @@ export interface ComponentOptions {
   globalStore?: boolean
 }
 
-export function Component(options?: ComponentOptions) {
+export function Component(options?: ComponentOptions): ClassDecorator {
   return function (target: any) {
     if (!target.resolveComponent) target.resolveComponent = resolveComponent
     Reflect.defineMetadata(MetadataKey, options, target)