Installation

npm i --save vuex-typesafe-actions

Usage

module.ts

1import { MutationTree, ActionTree } from 'vuex';
2import { action, useAction, useMutation } from 'vuex-typesafe-actions';
3import { RootStore } from '../store';
4import loadData from './api';
5
6export interface ModuleStore { 
7    data: string;
8}
9
10const a = useAction<ModuleStore, RootStore>();
11const m = useMutation<ModuleStore>();
12
13// mutations
14export const M_SET_DATA = (data: string) => action('module-set-data', string);
15
16// actions
17export const A_LOAD_DATA = (id: string) => action('module-load-data', id);
18
19const mutations: MutationTree<ModuleStore> = {
20    ...m(M_SET_DATA, (s, data) => {
21        s.data = data;
22    })
23};
24
25const actions: ActionTree<DepartmentsStore, RootStore> = {
26    ...a(A_LOAD_DATA, async ({ commit }, id) => {
27        try {
28            const data = await loadData(id);
29            commit(M_SET_DATA(data));
30        } catch (er) {
31            console.error(er);
32        }
33    })
34};
35
36const store = {
37    state: { data: '' },
38    mutations,
39    actions
40};
41
42export default store;
43

component.vue

1<template>{{data}}</template>
2
3<script lang="ts">
4
5import Vue from 'vue';
6import { mapAction } from 'vuex-typesafe-actions';
7import { RootStore } from '../store';
8import { A_LOAD_DATA } from './module';
9
10const moduleSelector = (root: RootStore) => root.module;
11
12const Component = Vue.extend({
13    computed: {
14        data: moduleSelector((s) => s.data)
15    },
16    methods: {
17        fetch: mapAction(A_LOAD_DATA)
18    },
19    beforeMount () {
20        this.fetch('1');
21    }
22});
23
24</script>