Vuex の mapXXXX をモジュール定義から動的に利用できるようにするツール
The Helper Tools allows you to use mapXXXX methods in Vuex with the mapped types derives from module definition.
Vuex Typed Mapper は mapXXXX のすべての記法をサポートしているわけではありません。 サポートしているのは下記の記法のみです。
function mapXXXX(map: string[]);
function mapXXXX(namespace: string, map: string[]);
オブジェクト形式のマッピングをオミットしたのには、下記の理由があります:
- 単純に実装コストが高かった
- 一度型情報さえつけてしまえば、別のオブジェクトに再マッピングするのはそう難しいことではない
なので、現状オブジェクト形式のマッピングをサポートする予定はありません。
Vuex Typed Mapper does not support all of signature of mapXXXX. it only supports below signature:
function mapXXXX(map: string[]);
function mapXXXX(namespace: string, map: string[]);
The reasons I omit Object-based mapping:
- It might be too difficult to support.
- Once the mapped properties typed, it is easy to re-map them with new keys.
For these reasons, there're no plans about supporting Object-based mapping.
// Vuex Module
import { buildModule, makeMappers } from "vuex-typed-mapper";
export const hogeModule = buildModule({
namespaced: true,
state: {
id: 1,
name: "Jhon Doe"
},
actions: {
rename({ commit }, name: string) {
commit("rename", name);
}
},
mutations: {
updateName(state, name: string) {
state.name = name;
}
}
});
export const hogeMappers = makeMappers(hogeModule);
// Vuex Store
import Vue from "vue";
import Vuex from "vuex";
import { hogeModule } from "./path/to/module-definition";
Vue.use(Vuex);
export default new Vuex.Store({
module: {
hoge: hogeModule
}
});
// Vue Component
<script lang="ts">
import Vue from 'vue';
import { hogeMapper } from './path/to/module-definition';
const hogeMappedState = hogeMapper.mapStateWithType(
'hoge',
['id', 'name']
);
export default Vue.extend({
computed: {
...hogeMappedState
},
methods: {
hogehoge() {
this.id // (property) this.id: number;
this.name // (property) this.name: string;
}
}
});
</script>
Defines fully-typed Vuex module.
function buildModule<
S,
R,
A extends ActionTree<S, R> = {},
M extends MutationTree<S> = {},
G extends GetterTree<S, R> = {}
>(
mod: FullyTypedModuleDefinition<S, R, A, M, G>
): FullyTypeModule<S, R, A, M, G>;
Returns fully-typed mappers:
mapStateWithType<S>
mapActionsWithType<A>
mapMutationsWithType<M>
mapGettersWithType<G>
function makeMappers<
S,
R,
A extends ActionTree<S, R>,
M extends MutationTree<S>,
G extends GetterTree<S, R>
>(
_module: FullyTypedModule<S, R, A, M, G>
): {
mapStateWithType();
mapActionsWithType();
mapMutationsWithType();
mapGettersWithType();
};
// maps all of properties in XXXX.
function mapXXXXWithType();
function mapXXXXWithType(namespace: string);
// maps properties with the defined names in XXXX. (`X` in Generics means `typeof XXXX`.)
function mapXXXXWithType<K extends keyof X>(map: K[]);
function mapXXXXWithType<K extends keyof X>(namespace: string, map: K[]);
Extended Vuex.Module<S, R>
, it can be used as Vuex.Store.module
.
interface FullyTypedModule<
S,
R,
A extends ActionTree<S, R>,
M extends MutationTree<S>,
G extends GetterTree<S, R>
> extends Vuex.Module<S, R> {
actions: A;
mutations: M;
getters: G;
}
Module definition for FullyTypedModule
interface FullyTypedModuleDefinition<
S,
R,
A extends ActionTree<S, R>,
M extends MutationTree<S>,
G extends GetterTree<S, R>
> extends Vuex.Module<S, R> {
actions?: A;
mutations?: M;
getters?: G;
}
MIT