vuex-ts-enhance
v1.0.0
Published
vuex types enhance
Downloads
1,874
Readme
vuex-ts-enhance
enhance types from vuex
it will check mapXXXX()
params for state
, getters
, actions
, mutations
in store
but dispatch
is different
const state = {};
const s = new EnhanceStore(state);
export const { dispatch } = s;
dispatch('rootAction')('payload');
dispatch('namespace', 'action')('payload');
Example
check for typescript
check for return type
tips from vscode
Usage
use EnhanceStore
to create store
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;
<template>
<div>
{{getName}} {{getUsername}} {{getUsername1}}
</div>
</template>
<script>
// @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']),
},
};
</script>
Note
if write in js and your getter
or actions
is empty, you must to declare it
// 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
asStoreOptions
const state: StoreOptions<any> = {}; // don't do that
- You must be defined
context
asany
if usejsdoc
for types
const state = {
actions: {
/**
* @param {any} context
* @param {string} payload
*/
someActions(context, payload) {},
},
};
develop
git clone project
yarn dev
- edit dev files
- add test case