Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ahaofficial/vue-state-store

📮 VSS (Vue State Store) - Vue State Management (with Publish & Subscribe pattern)
https://github.com/ahaofficial/vue-state-store

nuxt nuxt-module nuxtjs state state-management state-store store typescript vue vue-module vuejs

Last synced: about 1 month ago
JSON representation

📮 VSS (Vue State Store) - Vue State Management (with Publish & Subscribe pattern)

Host: GitHub
URL: https://github.com/ahaofficial/vue-state-store
Owner: AhaOfficial
License: mit
Created: 2020-08-07T06:27:04.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-11-23T08:28:03.000Z (almost 4 years ago)
Last Synced: 2024-10-09T21:09:21.435Z (about 1 month ago)
Topics: nuxt, nuxt-module, nuxtjs, state, state-management, state-store, store, typescript, vue, vue-module, vuejs
Language: TypeScript
Homepage: https://codepen.io/hmmhmmhm/pen/jOqMqGZ?editors=1010
Size: 324 KB
Stars: 130
Watchers: 7
Forks: 4
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

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)

- ([日本語 文書](https://github.com/AhaOfficial/vue-state-store/blob/master/docs/README.JP.md)) JP contributed by @yopinoji (thx! 😊)

- ([한국어 문서](https://github.com/AhaOfficial/vue-state-store/blob/master/docs/README.KR.md)) 

- ([Dokumenty Polskie](https://github.com/AhaOfficial/vue-state-store/blob/master/docs/README.PL.md)) PL contributed by @Milesq (🎉 so thanks!)




## 📔 Table of Contents

* [😊 Easy use! & Powerful application!](#-easy-use--powerful-application)

  * [💡 Advantages compared to vuex](#-advantages-compared-to-vuex)

  * [💬 Installation](#-installation)

  * [🔮 Devtools Apply](#-devtools-apply)

  * [📬 Pub & Sub Model Description](#-pub--sub-model-description)

* [😎 Basic Usage](#-basic-usage)

  * [📮 Primitive Type Pub & Sub](#-primitive-type-pub--sub)

  * [📮 Object Type Pub & Sub](#-object-type-pub--sub)

  * [📮 Create state & embedded action](#-create-state--embedded-action)

  * [📮 Binding within the Vue template](#-binding-within-the-vue-template)

* [🚀 Advanced Usage](#-advanced-usage)

  * [⏳ Asynchronous-tic Usage](#-asynchronous-tic-usage)

  * [💡 Vscode Intellisense Usage](#-vscode-intellisense-usage)

  * [📮 (Advanced) State Use Function Design Pattern](#-advanced-state-use-function-design-pattern)

  * [📮 (Advanced) Declare-Define-Inject-Use Design Pattern](#-advanced-declare-define-inject-use-design-pattern)

* [🤔 Q&A](#-qa)

  * [🧲 Q. Doesn't have a $store with all the state stores like vuex?](#-q-doesnt-have-a-store-with-all-the-state-stores-like-vuex)

  * [👀 Q. Will the changed value be rendered again if the `.bind()` value is changed?](#-q-will-the-changed-value-be-rendered-again-if-the-bind-value-is-changed)

  * [📡 Q. Is the `.bind()` value work two way binding?](#-q-is-the-bind-value-work-two-way-binding)

* [📔 License](#-license)




## 😊 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` supports `vue-devtools`. (You can see information about the state stores created through `vue-state-store` on the `vuex` tab.)

[View Related Content](https://github.com/AhaOfficial/vue-state-store-devtools)




### 📬 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 a `function` or `class`.




### 📮 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 '$' 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 the `setup` function of **@vue/composition-api**.






## 🚀 Advanced Usage

> Explain the advanced ways to use it. (This does not raise the learning curve.)




### ⏳ Asynchronous-tic Usage

> The function `.update()` and '.set()' return Promise.




- `await` allows 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.






### 💡 Vscode Intellisense Usage

>  To use both **vscode** and **typescript** at the same time and need some Intellisense support, you can obtain the module below.

[Vetur]: https://marketplace.visualstudio.com/items?itemName=octref.vetur

In order to receive support for intellisense in the template after installing vetur, the following option should be added to the vscode setting.

```json

"vetur.experimental.templateInterpolationService": true

```




### 📮 (Advanced) State Use Function Design Pattern

> `vue-state-store` provides examples of design patterns of functions that begin with `use~` similar to React Hooks to make the most of the composition API.

State Use Function refers to the use of a function that is preceded by the word `use` (if there is a state called `useTodo` inside the component and receives the status store as a result).

> This allows you to use the life cycle of the component in the state store.

If you use the accessor(`.set() and .update()`)  to modify the state, it can be very cumbersome to create complex logic, unlike when you modify the existing general variables.

`vue-state-store` allows for convenient change of state by directly accessing bindings within the store without the use of such an accessor. This design pattern is only a simple example of configuring the status usage function when using the Composition API (not necessarily), **If you need to modify the state in a complex way**, or **If you need to create multiple `compute` objects**.

Even if you modify a bound value, the changes are automatically distributed to the callbacks you are subscribing to each time the value changes.



> If you refer to the value of a bound store in a callback wrapped in `computed` , the callback will occur again whenever the value of that store changes. This reduces the fatigue of re-calculating each function as it is called, thus improving performance when using a state.



> To define Vue's lifecycle or `computed`, you must create one isolated function, such as `useTodo`, and must be call within the component.



> As shown above, you can use it within the template tag immediately after using useToto(). (Of course Typescript Intellisense is still supported.)




### 📮 (Advanced) Declare-Define-Inject-Use Design Pattern

> Please check the design pattern on a separate page.

[View Description](https://github.com/AhaOfficial/vue-state-store/blob/master/docs/0.advanced/README.EN.md)




## 🤔 Q&A

> Questions can also be asked through the Github Issue section.

  


### 🧲 Q. Doesn't have a $store with all the state stores like vuex?

>  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).




### 👀 Q. Will the changed value be rendered again if the `.bind()` value is changed?

> A. Yes, the storage values changed through the ref of vue are reflected in the DOM through template tags in real time.




### 📡 Q. Is the `.bind()` value work two way binding?

> A. Yes, the binding value changes as the storage value changes, and the storage value changes as the binding value changes.







## 📔 License

> Copyright (c) 2020 AhaOfficial

**MIT Licensed**