Vue 3, Vuex 4 Modules | Vue3 vuex-typescript
InthisarticlewewillgoingtoseehowcanweusetypescriptalongwithVue3andVuex4andVuexModules.Note:Vuex4isstillinbetaversion.Alsoalongwithremovalofglobalthisfromvue,this.$storeisalsoremovedfromvuex4anditsuptodevelopertowritetypingsforstore.Youcanreadmoreaboutfromvuex-release-note[1]WewillbecreatingmoduleslikerootandcounterwhereincounterwillbemoduleandrootasRootState.Letscreateamodulefolderinsidestorefolderandanindex.tswhichwillexportourstore.wewillalsohaveinterfaces.tsfilewhichwillhaveallinterfacesf...
In this article we will going to see how can we use typescript along with Vue 3 and Vuex 4 and Vuex Modules.
Note: Vuex 4 is still in beta version. Also along with removal of global this from vue, this.$store is also removed from vuex 4 and its upto developer to write typings for store.You can read more about from vuex-release-note[1]
We will be creating modules like root and counter wherein counter will be module and root as RootState.Lets create a module folder inside store folder and an index.ts which will export our store.
we will also have interfaces.ts file which will have all interfaces for our store.
import { ActionContext } from "vuex"; import { MutationTypes as CounterMTypes } from "./modules/counter/mutation-types"; import { ActionTypes as CounterATypes } from "./modules/counter/action-types"; export interface IRootState { root: boolean; version: string; } export interface CounterStateTypes { counter?: number; rootDis...