Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/snaptopixel/vuex-ts-decorators
Write Vuex stores and modules with type-safety and code completion
https://github.com/snaptopixel/vuex-ts-decorators
decorators typescript vue vuejs vuex
Last synced: 10 days ago
JSON representation
Write Vuex stores and modules with type-safety and code completion
- Host: GitHub
- URL: https://github.com/snaptopixel/vuex-ts-decorators
- Owner: snaptopixel
- Created: 2017-02-15T14:50:21.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-25T05:40:49.000Z (almost 7 years ago)
- Last Synced: 2024-09-22T10:35:08.663Z (about 2 months ago)
- Topics: decorators, typescript, vue, vuejs, vuex
- Language: TypeScript
- Homepage:
- Size: 48.8 KB
- Stars: 52
- Watchers: 9
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
⚠️ **This project is currently undergoing refactoring and is NOT production ready** ⚠️
# TypeScript Decorators for Vuex [](https://circleci.com/gh/snaptopixel/vuex-ts-decorators) [](https://www.npmjs.com/package/vuex-ts-decorators)
> Write Vuex stores and modules with type-safety and code completion
- [Quick primer](#quick-primer)
- [Inspiration](#inspiration)
- [Basic example](#basic-example)
- [Conventions for type-safety](#conventions-for-type-safety)
- [Example store with typed `dispatch` and `commit`](#example-store-with-typed-dispatch-and-commit)
- [Example usage and code structure](#example-usage-and-code-structure)
## Quick primer
Decorators can seem quite magical so it helps to have a basic understanding of what they do (and don't do). In this implementation the main job of decorators is to transform a `class` _definition_ into a “shape” which Vuex supports.
So, you write a nice class with comfortable syntax and the decorators do the legwork of mapping, transforming and replacing your class with something else. They also normalize the scope in which your actions, mutations and getters operate so instead of using function params you end up just using `this` to access things in a straightforward (and type-safe) way.
## Inspiration
This solution is heavily inspired by the excellent work on [vue-class-component](https://github.com/vuejs/vue-class-component) which makes writing components in TypeScript very ergonomic and fun. The goal of this project is to apply similar patterns to Vuex while also providing (and [allowing for](#conventions-for-type-safety)) TypeScript niceties like code-completion and type-safety all the way down.
## Basic example
The following snippet shows a standard Vuex declaration followed by an example using decorators.
```ts
// Without decorators
const MyStore = new Vuex.Store({
state: {
prop: 'value'
},
getters: {
myGetter(state, getters) {
return state.prop + ' gotten';
},
myOtherGetter(state, getters) {
return getters.myGetter + ' again';
}
},
actions: {
myAction({commit, getters}, payload) {
commit('myMutation', getters.myOtherGetter + payload.prop);
}
},
mutations: {
myMutation(state, payload) {
state.prop = payload;
}
}
})
// With decorators
@module({
store: true
})
class MyStore {
prop = 'value';
get myGetter(): string {
return this.prop + ' gotten';
}
get myOtherGetter(): string {
return this.myGetter + ' again';
}
@action
myAction(payload) {
this.commit('myMutation', this.myOtherGetter + payload.prop);
}
@mutation
myMutation(payload) {
this.prop = payload;
}
}
```
## Conventions for type-safety
You may have noticed a problem with the second example above. Inside `myAction` we're making a call to `this.commit()` which is not defined on the class and will throw an error at compile time.
It's important to note that by themselves, these decorators do not provide full type-safety for Vuex. Instead they allow you to write your stores and modules in a way that allows you to _achieve_ type-safety via normal TypeScript conventions.
### Example store with typed `dispatch` and `commit`
```ts
type actions = {
myAction: {prop: string}
}
type mutations = {
myMutation: string
}
type TypedDispatch = (type: T, value?: actions[T] ) => Promise;
type TypedCommit = (type: T, value?: mutations[T] ) => void;
@module({
store: true
})
class MyStore {
dispatch: TypedDispatch;
commit: TypedCommit;
prop = 'value';
get myGetter(): string {
return this.prop + ' gotten';
}
get myOtherGetter(): string {
return this.myGetter + ' again';
}
@action
myAction(payload: actions['myAction']) {
this.commit('myMutation', this.myOtherGetter + payload.prop);
}
@mutation
myMutation(payload: mutations['myMutation']) {
this.prop = payload;
}
}
```
## Example usage and code structure
For futher answers and information, please check out the companion [vuex-ts-example](https://github.com/snaptopixel/vuex-ts-example) project. You'll be able to see the decorators in action as well as some guidance on how you can structure your code for the best results.