Vuex Module Decorators

Updated: 1 Sep 2023

1791 Stars

TypeScript/ES7 Decorators to create Vuex modules declaratively

Overview

The vuex-module-decorators library simplifies the creation of Vuex modules by using TypeScript/ES7 decorators. This tool provides a more intuitive way to define Vuex modules, making code cleaner and more organized. By leveraging decorators, developers can enhance the readability and structure of their Vuex store.

Features

TypeScript/ES7 Decorators: Utilize decorators to streamline the creation of Vuex modules.
Improved Syntax: Offers a more concise and readable syntax compared to conventional Vuex module creation.
Automatic Getter Detection: Simplifies the process of defining getters, with parameter handling support.
Dynamic Modules: Facilitates the registration of modules into the store at runtime, enabling greater flexibility.

Installation

Babel 6/7

Install babel-plugin-transform-decorators.
For TypeScript, set experimentalDecorators to true.
If using TypeScript 2, set importHelpers: true in tsconfig.json and emitHelpers: true in tsconfig.json.

Configuration

When using with target es5, ensure compatibility by following setup instructions.
For projects targeting ES6 or ES2015, no additional configuration is required.

Usage

Replace the conventional Vuex module creation method with the decorator-based approach for improved syntax.
Implement features such as async MutationAction and automatic getter detection.
Create dynamic modules for runtime registration within the store.

Summary

The vuex-module-decorators library offers a more intuitive and concise way to define Vuex modules using TypeScript/ES7 decorators. By simplifying the module creation process and enhancing syntax readability, developers can leverage decorators to streamline Vuex store management. The tool also provides features like automatic getter detection and support for dynamic modules, making Vuex module implementation more efficient and flexible.