vuex-module-decorators-state

1. @State

You need this package if you use:

• Vue2
• Typescript
• vue-class-component or vue-property-decorator
• vuex-module-decorators

This decorator adds an easy life-hack to maintain strong typing and easy integration for injecting vuex state to vue class-based component. Check this issue

Example

Want to inject your state like this with typesafe?

1    @State
2    public readonly user!: user;

Check this vue-webpack-typescript or follow the example bellow.

Install

1yarn add vuex-module-decorators-state

How to use?

1. Extract common vuex-module-decorator interfaces into a separate file, let's say types.ts:

1// Typescript type of the state you want to inject
2export interface Branch {
3  "name": string;
4}
5// Root vuex store.
6export interface IRootState {
7  github: IGithubState;
8}
9
10// Store module you want to inject. If you have only single store module. You won't need interface above
11export interface IGithubState {
12  branch: Branch;
13}

2. Create your store:

store.ts:

1import Vuex, {Store} from "vuex";
2import Vue from "vue";
3import {Branch, IGithubState, IRootState} from "@/types";
4import {Module, Mutation, VuexModule, getModule} from "vuex-module-decorators";
5
6Vue.use(Vuex);
7
8const store: Store<IRootState> = new Store<IRootState>({});
9
10@Module({
11  dynamic: true,
12  name: "github",
13  store,
14})
15class GithubModule extends VuexModule implements IGithubState {
16  public branch: Branch = {name: "Master branch"};
17}
18
19export const githubModule: GithubModule = getModule(GithubModule);
20

3. Create decorator with factory method by passing githubModule:

1import {stateDecoratorFactory} from 'vuex-module-decorators-state'
2export const GithubState = stateDecoratorFactory(githubModule);

You don't need to declare type of the var in order for typescript to give you compilation errors if type missmatches. But if you want to have types, there you go:

1export const GithubState: <TCT extends (TCT[TPN] extends GithubModule[TPN] ? unknown : never),
2  TPN extends (keyof TCT & keyof GithubModule)>(vueComponent: TCT, fileName: TPN) => void =
3    stateDecoratorFactory(githubModule);

4. Apply decorator anywhere in your components:

1<template>
2 <div>
3  {{branch.name}}
4</div>
5</template>
6<script lang="ts">
7  import {Component, Vue} from "vue-property-decorator";
8  import {GithubState} from "@/store";
9  import {Branch} from "@/types";
10  
11  @Component
12  export default class RepoBranches extends Vue {
13  
14    @GithubState
15    public readonly branch!: Branch;
16  }
17</script>

If you do

1import {GithubState} from "@/store";
2import {Branch} from "@/types";
3
4class RepoBranches extends Vue  {
5    @GithubState
6    // Results typescript compilation error because state doesn't exist
7    public readonly notExistedState!: Branch;
8  
9    @GithubState
10    // Results typescript compilation error, because type mismatch
11    public readonly branch!: string;
12}

2. @HandleLoading

This decorators wraps vue component with with block, that wraps the function and does:

• Triggers loading state to true on start, and false on finish
• Sets error message if it occurs

Check this vue-webpack-typescript or follow the example bellow.:

1import {HandleLoading} from 'vuex-module-decorators-state'
2
3class MyComp extends Vue {
4  public serverError: string = ""; // this would result an error string
5  public loading: boolean = false; // this would turn to true on start, and to false on finish
6  @HandleLoading({errPropNameOrCB: "serverError", loadingPropName: "loading"})
7  private async submitForm(): Promise<void> {
8    // do some action
9  }
10}

Build this package and publish:

1yarn build
2# npm login
3npm publish