This repository has been archived by the owner. It is now read-only.
Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
156 lines (119 sloc) 2.53 KB

Vue Decorators

This is Vue Decorators v1.1.7 (beta)

Vue & Vuex Decorators for ECMAscript

Dependencies

Installation

npm install --save vue-decorators

Decorators

Vue-decorators has many decorators, for example:

  • @Component or @Component({ ... })

  • @InjectComponents({ ... })

  • @Prop or @Prop({ ... })

  • @Watch or @Watch('...')

  • @Lifecycle or @Lifecycle('...')

  • @Filter or @Filter('...')

  • @Computed

  • @State or @State('...')

  • @Action or @Action('...')

  • @Getter or @Getter('...')

  • @Mutation or @Mutation('...')

Other decorators you can see in the documentation.

Example for Vue components

import Vue from 'vue'
import {
  Component,
  InjectComponents,
  Prop,
  Watch,
  Lifecycle,
  Computed,
  Filter,

  State,
  Action,
  Getter,
  Mutation
} from 'vue-decorators';
import Component1 from '...';
import Component2 from '...';

@Component
@InjectComponents({
    Component1,
    Component2
})
export class MyComponent extends Vue {
  credentials = {
    username: '',
    password: ''
  };
  otherData = 123;

  @Prop property1;
  @Prop({
    type: Number,
    default: 100
  }) property2;
  @Prop({ required: true }) property3;

  @Action login;
  @Getter currentUser;

  @Watch('otherData')
  otherDataListener(){ /* ... */ }

  @Lifecycle
  created(){ /* ... */ }

  @Computed
  computedMethod(){ /* ... */ }

  @Filter
  filterName(){ /* ... */ }

  normalVueMethod(){
    /* ... */
    this.login().then(function(){ /* ... */ });
  }
}

Example for Stores

// store/modules/auth.js
import {Module, State, Action, Getter, Mutation} from 'vue-decorators';

@Module
export default class AuthModule {
    @State currentUser = null;

    @Action
    fetchCurrentUser({commit}){
        // ...
    }

    @Getter
    getCurrentUser(state){
      return state.currentUser;
    }

    @Mutation
    attachCurrentUser(state, currentUser){
      state.currentUser = currentUser;
    }
}
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import {Store, InjectModules} from 'vue-decorators';

import auth from './modules/auth';

Vue.use(Vuex);

@Store({
  strict: true
})
@InjectModules({
  auth
})
@InjectPlugin(createLogger())
export default class AppStore extends Vuex.Store {
    @State rootExampleState = 'foo';

    @Action
    rootExampleAction(){ /* ... */ }
}

License

MIT