https://github.com/paraself/vuexy
A static typed wrapper for vuex
https://github.com/paraself/vuexy
Last synced: about 1 year ago
JSON representation
A static typed wrapper for vuex
- Host: GitHub
- URL: https://github.com/paraself/vuexy
- Owner: paraself
- Created: 2018-06-04T18:04:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T18:26:34.000Z (almost 5 years ago)
- Last Synced: 2025-03-28T13:21:35.653Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 18.6 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vuexy
An static typed wrapper for vuex.
It's still a proof of concept, bugs are everywhere, do not use in production
## Usage
In main.ts
``` typescript
import Vuex from 'vuex'
import { Vuexy } from 'vuexy'
const store = new Vuex.Store({
// ... initialize your vuex store
})
Vuexy.init(store)
```
Define you vuexy module.
``` typescript
// StoreCart.ts
import { VuexyModule, Mutation, Action, Getter } from '../index'
class StoreCart extends VuexyModule {
// memeber variables become states
public count: number = 0
@Mutation
add(payload?: any):void {
console.log(payload)
this.count++
}
@Action
async deferAdd():Promise {
setTimeout(() => {
this.add()
}, 1000);
}
@Getter
getCount() {
return this.count
}
}
// this is IMPORTANT! export a singleton via parent's factory function
export default StoreCart.Instance(StoreCart)
```
Use your module
``` typescript
// MyComponent.vue
// use your module states directly in template
{{StoreCart.count}}
import { Vue, Component } from 'vue-property-decorator'
import StoreCart from './StoreCart.ts'
@Component
export default class MyComponent extends Vue {
private StoreCart: any = StoreCart
// use mutation or actions in functions
myFunc () {
this.StoreCart.deferAdd()
.then(this.StoreCart.add)
}
// can also assign member variable to StoreCart's state
count = StoreCart.count
deferAdd = StoreCart.deferAdd
add = StoreCart.add
}