vuex-typescript-helper
Namespaced store helper for Vuex with TypeScript
Requirements
Usage
;;; Vue.useVuex;Vue.useVuexTypeScriptHelper; // register vuex-typescript-helper after vuex .getter"str",`_` .getter"numOrStr",state.bool ? getters.str : state.num .mutation"setNum",state.num = payload.value .mutation"setStr1",state.str1 = payload.value .mutation"setStr2",state.str2 = payload.value .mutation"toggleBool",state.bool = !state.bool .action"setStr", .build; .mutation"increaseCount",state.count += payload.count != null ? payload.count : 1 .module"moduleA", moduleA .build; declare ; new Vue.$mount"#app";
In App.vue
<template> <div> <div>Num: {{ num }}</div> <div>Str: {{ str }}</div> <div>Count: {{ count }}</div> <button @click="increase()">Increase</button> <button @click="setStr()">SetStr</button> </div></template> <script lang="ts">import Vue from "vue";import Component from "vue-class-component"; @Componentexport default class App extends Vue { public get num() { return this.$storeFactory("moduleA")().state.num; } public get str() { return this.$storeFactory("moduleA")().getters.str; } public get count() { return this.$storeFactory().state.count; } public increase() { this.$storeFactory().commit("increaseCount", {}); } public setStr() { this.$storeFactory("moduleA")().dispatch("setStr", { value: "aaa_bbb" }); }}</script>
For more example, see test/test.ts
License
MIT