💪 VuexTs
Strongly-typed Vuex modules built for high-complexity stores and high-scalability needs.
🔗 Installation
Install via yarn
(recommended):
yarn add vuex-ts
Install via npm
:
npm install vuex-ts
🛠️ Usage
Creating a basic module
VuexTs has a simple API consisting of two functions: vuexTsModuleBuilder
and registerVuexTsModules
. The rest is a pattern to ensure strong-typing, enforced by abstract TypeScript classes and supported by Symbol-based access to contextual state
, rootState
, and other features of Vuex from within your getter, mutation, and action handlers. If you're familiar with Redux, some of this pattern may be familiar to you.
Let's start with a basic example:
;; // MyModuleState is an interface describing the shape of this Vuex module.; // RootState is an interface describing the shape of your Vuex store.; // MyModuleGetters is a class describing the getter handlers of this Vuex module.; // MyModuleMutations is a class describing the mutation handlers of this Vuex module.; // MyModuleActions is a class describing the action handlers of this Vuex module.; // MyModuleChildren is a class describing the nested modules of this Vuex module. ; // vuexTsBuilder() wraps the module instantiation logic to enable// type inference of injected getters, mutations, actions,// and nested modules.;
Before we can use this module in our app we must register it to a Vuex store:
;;;; Vue.useVuex; ; // Alternatively, you can instantiate a Vuex store directly from the module.// Doing it this way makes `myModuleInstance` into the root module of the store.;
Now let's write our getters
:
;;
And our mutations
:
;;
And our actions
:
;;
And finally, of course, we can define some nested modules:
;;;
Nested modules are accessible from the top-level of their parent, like this:
// It's just another VuexTsModule object,// so you have access to `state`, `commit`, `dispatch`, etc.myModule.someNestedModule
That's all there is to it! Naturally, you can choose to separate actions/mutations/getters across files or consolidate. A separation of concerns alongside strong typing is what makes VuexTs work well at scale!
For a working example, see ./example
.
API
Detailed API documentation forthcoming...