README
📮 vue-state-store (vss)
Simple state management system that full supports for typescript.
📬 Distributed state management module system for Vue. [Pub & Sub model based]
🌎 Global
The following multilingual documents are provided. (need pull request help)
(日本語 文書) JP contributed by @yopinoji (thx! 😊)
(한국어 문서)
(Dokumenty Polskie) PL contributed by @Milesq (🎉 so thanks!)
📔 Table of Contents
😊 Easy use! & Powerful application!
vue-state-store (vss)
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.
💡 Advantages compared to vuex
- 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.
💬 Installation
(Vue2, Vue3, Nuxt is supported. Automatic binding function in Composition API : .bind(')' is supported.)
npm i vue-state-store
🔮 Devtools Apply
vue-state-store
supportsvue-devtools
. (You can see information about the state stores created throughvue-state-store
on thevuex
tab.)
📬 Pub & Sub Model Description
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)
.
😎 Basic Usage
vue-state-store
is an easy way to manage both state and actions and mutations through afunction
orclass
.
📮 Primitive Type Pub & Sub
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".
📮 Object Type Pub & Sub
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.
📮 Create state & embedded action
vue-state-store
can 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.
📮 Binding within the Vue template
vue-state-store
can 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 '