Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zWingz/vuex-ts-enhance
vuex types enhance
https://github.com/zWingz/vuex-ts-enhance
Last synced: 26 days ago
JSON representation
vuex types enhance
- Host: GitHub
- URL: https://github.com/zWingz/vuex-ts-enhance
- Owner: zWingz
- Created: 2020-04-30T11:03:21.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T01:57:15.000Z (over 1 year ago)
- Last Synced: 2024-01-02T23:39:12.828Z (5 months ago)
- Language: TypeScript
- Size: 4.35 MB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Lists
- awesome-vue - vuex-ts-enhance - A tool to enhance `mapXXX` and `dispatch` methods hint (Components & Libraries / Utilities)
- awesome-vue - vuex-ts-enhance - A tool to enhance `mapXXX` and `dispatch` methods hint (Components & Libraries / Utilities)
- awesome-vue - vuex-ts-enhance - A tool to enhance `mapXXX` and `dispatch` methods hint (Components & Libraries / Utilities)
- awesome-vue - vuex-ts-enhance - A tool to enhance `mapXXX` and `dispatch` methods hint (Components & Libraries / Utilities)
- awesome-vue - vuex-ts-enhance - A tool to enhance `mapXXX` and `dispatch` methods hint (Components & Libraries / Utilities)
- awesome-vue - vuex-ts-enhance - A tool to enhance `mapXXX` and `dispatch` methods hint (Components & Libraries / Utilities)
- awesome-vue - vuex-ts-enhance - A tool to enhance `mapXXX` and `dispatch` methods hint (Components & Libraries / Utilities)
- awesome-vue - vuex-ts-enhance - A tool to enhance `mapXXX` and `dispatch` methods hint (Components & Libraries / Utilities)
README
# vuex-ts-enhance
enhance types from vuex
it will check `mapXXXX()` params for `state`, `getters`, `actions`, `mutations` in store
but `dispatch` is different
```typescript
const state = {};
const s = new EnhanceStore(state);
export const { dispatch } = s;
dispatch('rootAction')('payload');
dispatch('namespace', 'action')('payload');
```
## Example
[state](./dev/store.ts)
**check for typescript**
**check for return type**
**tips from vscode**
## Usage
use `EnhanceStore` to create `store`
```ts
import { EnhanceStore } from 'vuex-ts-enhance';
import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
// state cannot be declared
const state = {
// your state
};
const s = new EnhanceStore(state);
export const {
mapGetters,
store,
mapActions,
dispatch,
mapState,
mapMutations,
} = s;
```
```html
{{getName}} {{getUsername}} {{getUsername1}}
// @ts-check
import { mapGetters, mapActions, dispatch } from './store';
export default {
computed: {
...mapGetters('namespace', ['namespaceGetter']), // will check type
...mapGetters(['getter1']),
...mapGetters('namespace', {
getterAlias: 'namespaceGetter',
}),
},
mounted() {
console.log(this.namespaceGetter);
console.log(this.getter1);
console.log(this.getterAlias);
this.namespaceAction;
this.action1;
dispatch('namespace', 'namespaceAction')('payload');
dispatch('action1')('payload');
},
methods: {
...mapActions('namespace', ['namespaceAction']),
...mapActions(['action1']),
},
};
```
**Note**
if write in js and your `getter` or `actions` is empty, you must to declare it
```js
// store.js
/**
* @constant
* @type {import('vuex').GetterTree}
*/
const getters = {};
/**
* @constant
* @type {import('vuex').ActionTree}
*/
const actions = {};
/**
* @constant
* @type {import('vuex').MutationTree}
*/
const mutations = {};
```
## Notice
- You can't defined `state` as `StoreOptions`
```typescript
const state: StoreOptions = {}; // don't do that
```
- You must be defined `context` as `any` if use `jsdoc` for types
```javascript
const state = {
actions: {
/**
* @param {any} context
* @param {string} payload
*/
someActions(context, payload) {},
},
};
```
## develop
- `git clone project`
- `yarn dev`
- edit dev files
- add test case