https://github.com/akoidan/vuex-module-decorators-state
Additional decorators for npm vuex-module-decorators
https://github.com/akoidan/vuex-module-decorators-state
Last synced: about 1 month ago
JSON representation
Additional decorators for npm vuex-module-decorators
- Host: GitHub
- URL: https://github.com/akoidan/vuex-module-decorators-state
- Owner: akoidan
- License: mit
- Created: 2020-10-26T14:56:34.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-10-28T13:55:24.000Z (over 4 years ago)
- Last Synced: 2025-02-28T10:56:39.315Z (2 months ago)
- Language: TypeScript
- Size: 14.6 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuex-module-decorators-state
[](http://hits.dwyl.com/akoidan/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](https://github.com/championswimmer/vuex-module-decorators/issues/191)
### Example
Want to inject your state like this with typesafe?
```typescript
@State
public readonly user!: user;
```
Check this [vue-webpack-typescript](https://github.com/akoidan/vue-webpack-typescript) or follow the example bellow.
### Install
```bash
yarn add vuex-module-decorators-state
```
### How to use?
1. Extract common vuex-module-decorator interfaces into a separate file, let's say **types.ts**:
```typescript
// Typescript type of the state you want to inject
export interface Branch {
"name": string;
}
// Root vuex store.
export interface IRootState {
github: IGithubState;
}
// Store module you want to inject. If you have only single store module. You won't need interface above
export interface IGithubState {
branch: Branch;
}
```
2. Create your store:
**store.ts**:
```typescript
import Vuex, {Store} from "vuex";
import Vue from "vue";
import {Branch, IGithubState, IRootState} from "@/types";
import {Module, Mutation, VuexModule, getModule} from "vuex-module-decorators";
Vue.use(Vuex);
const store: Store = new Store({});
@Module({
dynamic: true,
name: "github",
store,
})
class GithubModule extends VuexModule implements IGithubState {
public branch: Branch = {name: "Master branch"};
}
export const githubModule: GithubModule = getModule(GithubModule);
```
3. Create decorator with factory method by passing githubModule:
```typescript
import {stateDecoratorFactory} from 'vuex-module-decorators-state'
export 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:
```typescript
export const GithubState: (vueComponent: TCT, fileName: TPN) => void =
stateDecoratorFactory(githubModule);
```
4. Apply decorator anywhere in your components:
```vue
{{branch.name}}
import {Component, Vue} from "vue-property-decorator";
import {GithubState} from "@/store";
import {Branch} from "@/types";
@Component
export default class RepoBranches extends Vue {
@GithubState
public readonly branch!: Branch;
}
```
If you do
```typescript
import {GithubState} from "@/store";
import {Branch} from "@/types";
class RepoBranches extends Vue {
@GithubState
// Results typescript compilation error because state doesn't exist
public readonly notExistedState!: Branch;
@GithubState
// Results typescript compilation error, because type mismatch
public readonly branch!: string;
}
```
## 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](https://github.com/akoidan/vue-webpack-typescript) or follow the example bellow.:
```typescript
import {HandleLoading} from 'vuex-module-decorators-state'
class MyComp extends Vue {
public serverError: string = ""; // this would result an error string
public loading: boolean = false; // this would turn to true on start, and to false on finish
@HandleLoading({errPropNameOrCB: "serverError", loadingPropName: "loading"})
private async submitForm(): Promise {
// do some action
}
}
```
### Build this package and publish:
```bash
yarn build
# npm login
npm publish
```