{"id":16489081,"url":"https://github.com/thundernet8/velay","last_synced_at":"2026-01-24T17:32:17.333Z","repository":{"id":34882750,"uuid":"168653624","full_name":"thundernet8/Velay","owner":"thundernet8","description":"使用 TypeScript 以 OOP 的方式写 Vue 和 Vuex store.","archived":false,"fork":false,"pushed_at":"2022-12-03T09:32:26.000Z","size":3204,"stargazers_count":3,"open_issues_count":18,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T23:44:02.586Z","etag":null,"topics":["injection","oop","vue","vuex"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thundernet8.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-01T06:35:31.000Z","updated_at":"2020-01-20T03:48:08.000Z","dependencies_parsed_at":"2023-01-15T10:00:51.677Z","dependency_job_id":null,"html_url":"https://github.com/thundernet8/Velay","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thundernet8%2FVelay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thundernet8%2FVelay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thundernet8%2FVelay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thundernet8%2FVelay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thundernet8","download_url":"https://codeload.github.com/thundernet8/Velay/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249130942,"owners_count":21217639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["injection","oop","vue","vuex"],"created_at":"2024-10-11T13:42:59.278Z","updated_at":"2026-01-24T17:32:17.326Z","avatar_url":"https://github.com/thundernet8.png","language":"TypeScript","readme":"## Velay\n\n使用 TypeScript 以 OOP 的方式写 Vue 和 Vuex store.\n\n## Requirements\n\n```json\n// tsconfig.json\n\n{\n    \"compilerOptions\": {\n        ...\n        \"experimentalDecorators\": true,\n        \"emitDecoratorMetadata\": true,\n        ...\n    }\n}\n```\n\n## Usage\n\n### Write Store Class\n\n```ts\n// my-store.ts\nimport { Injectable, State, StoreService } from 'velay';\n\nexport class MyStoreService extends StoreService {\n    @State\n    count: number = 0;\n\n    @State\n    title: string = 'hello, velay';\n\n    @State\n    list: { name: string; count: number }[] = [{ name: 'velay1', count: 1 }, { name: 'velay2', count: 2 }];\n\n    changeTitle(title: string) {\n        this.title = title;\n    }\n\n    addCount() {\n        this.count = this.count + 1;\n    }\n}\n```\n\n### Write Component\n\n```ts\n// my-component.vue\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003ch2\u003e{{ store.title }}{{ store.count }}\u003c/h2\u003e\n        \u003cul\u003e\n            \u003cli v-for=\"(item, index) in store.list\" :key=\"index\"\u003e\n                \u003cdiv\u003e{{ item.name }}-{{ item.count }}\u003c/div\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cbutton @click=\"store.changeTitle('new hello')\"\u003eChange title\u003c/button\u003e\n        \u003cbutton @click=\"store.addCount\"\u003eAdd count\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript lang=\"ts\"\u003e\nimport { Vue, Component } from 'velay';\nimport { MyStoreService } from './my-store';\n\n@Component({})\nexport default class MyComponent extends Vue {\n    constructor(private readonly store: MyStoreService) {\n        super();\n    }\n\n    mounted() {\n        console.log('store', this.store);\n    }\n}\n\u003c/script\u003e\n```\n\n## More\n\n### Debug\n\n开启 debug\n\n```ts\nVelay.config.debug = true;\n```\n\n### Vetur\n\n开启模板语法检查，配合 velay 获得更佳的强类型校验\n\n```json\n{\n    \"vetur.experimental.templateInterpolationService\": true\n}\n```\n\n### Augmenting Vue Types\n\n[https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins](https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthundernet8%2Fvelay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthundernet8%2Fvelay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthundernet8%2Fvelay/lists"}