https://github.com/thundernet8/velay

使用 TypeScript 以 OOP 的方式写 Vue 和 Vuex store.
https://github.com/thundernet8/velay

injection oop vue vuex

Last synced: about 1 month ago
JSON representation

使用 TypeScript 以 OOP 的方式写 Vue 和 Vuex store.

• Host: GitHub
• URL: https://github.com/thundernet8/velay
• Owner: thundernet8
• License: mit
• Created: 2019-02-01T06:35:31.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T09:32:26.000Z (about 2 years ago)
• Last Synced: 2024-12-15T13:17:22.437Z (about 2 months ago)
• Topics: injection, oop, vue, vuex
• Language: TypeScript
• Homepage:
• Size: 3.06 MB
• Stars: 3
• Watchers: 4
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Velay

使用 TypeScript 以 OOP 的方式写 Vue 和 Vuex store.

## Requirements

```json

// tsconfig.json

{

    "compilerOptions": {

        ...

        "experimentalDecorators": true,

        "emitDecoratorMetadata": true,

        ...

    }

}

```

## Usage

### Write Store Class

```ts

// my-store.ts

import { Injectable, State, StoreService } from 'velay';

export class MyStoreService extends StoreService {

    @State

    count: number = 0;

    @State

    title: string = 'hello, velay';

    @State

    list: { name: string; count: number }[] = [{ name: 'velay1', count: 1 }, { name: 'velay2', count: 2 }];

    changeTitle(title: string) {

        this.title = title;

    }

    addCount() {

        this.count = this.count + 1;

    }

}

```

### Write Component

```ts

// my-component.vue

    


        
{{ store.title }}{{ store.count }}

        


            


                
{{ item.name }}-{{ item.count }}

            

        

        Change title

        Add count

    


import { Vue, Component } from 'velay';

import { MyStoreService } from './my-store';

@Component({})

export default class MyComponent extends Vue {

    constructor(private readonly store: MyStoreService) {

        super();

    }

    mounted() {

        console.log('store', this.store);

    }

}

```

## More

### Debug

开启 debug

```ts

Velay.config.debug = true;

```

### Vetur

开启模板语法检查，配合 velay 获得更佳的强类型校验

```json

{

    "vetur.experimental.templateInterpolationService": true

}

```

### Augmenting Vue Types

[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)