Simple state management system that full supports for typescript.
📬 Distributed state management module system for Vue. [Pub & Sub model based]
The following multilingual documents are provided. (need pull request help)
vue-state-store is a module that is intended to completely replace the vuex modules that were popular with the vue. The purpose of this module is to make state management very easy by using 200% efficiency of typescript.
- Low running curve - Use simple publishing & subscription model
- Supports Typescript Intellisense - Status & Actions & Mutation & When using variables within Templates
- Auto-Bind function - Easy vue template binding.
- Pure typescript class based definition - no need to use mix-in
- A unified action structure - Flexible use with no distinction between action and motion.
- Allow flexible state use - If you omit Mutation, you can use it as Getters.
(Vue2, Vue3, Nuxt is supported. Automatic binding function in Composition API : .bind(')' is supported.)
npm i vue-state-store
vue-state-store uses publish & subscription design patterns.
vue-state-store is a storage that exists in the memory where values are stored. The .subscribe (callback) function allows you to receive changed values in a callback when values in the storage change, and you can update the values in the storage through .set (newValue) and .update((data) => data).
vue-state-storeis an easy way to manage both state and actions and mutations through afunctionorclass.
Primitive type means five basic types (number, string, boolean, null, undefined).
The
.subscribe()function, when the execution, gives a function as a return value, which can interrupt the storage subscription at any time. So I write that value name of "unsubscribe".
If you look below, you can see that there is little difference between the top and the usage.
In
store(value), the value can be a primary type or object.
vue-state-storecan define embedded actions by inheriting classes.
In vue-state-store, the distinction between action and motion is not required.
- By creating any function in the class, you can configure Embedded action.
- Any function that transforms a state without being embedded in the class is called Outside Action.
vue-state-storecan easily bind the repository to the vue template tag, and the bound store continues to support Typescript Intellisense within the template tag. Typescript Intellisense is also supported when using embedded actions into the storage within the <script> tag.
- The embedded action can be called just by calling the state through
import. - The '
bind()function automatically binds the storage into the template.- It is recommended to put '$' in front of the existing storage name as a naming rule, as shown in
return { $vote: vote.bind() }. - The
.bind()function is recommended to be used within thesetupfunction of @vue/composition-api.
- It is recommended to put '$' in front of the existing storage name as a naming rule, as shown in
Explain the advanced ways to use it. (This does not raise the learning curve.)
The function
.update()and '.set()' return Promise.
awaitallows certain logic to run after the update job completes when you update the storage values.
- You can also define callbacks to async that are passed to the update function.
To use both vscode and typescript at the same time and need some Intellisense support, you can obtain the module below.
In order to receive support for intellisense in the template after installing vetur, the following option should be added to the vscode setting.
"vetur.experimental.templateInterpolationService": trueQuestions can also be asked through the Github Issue section.
A. No, it's not. It's a non-recommended design pattern.
it's recommended that you import and use only a few stores after creating any index.ts file, , such as import { vote } from '~/store. vue-state-store has a distributed structure and can only refer to each other individually if each storage is required.
vue-state-store consists of vue completely independent (until it is used within the vue template tag through the .bind() function).
A. Yes, the storage values changed through the ref of vue are reflected in the DOM through template tags in real time.
A. Yes, the binding value changes as the storage value changes, and the storage value changes as the binding value changes.
Copyright (c) 2020 AhaOfficial
MIT Licensed