{"id":13610877,"url":"https://github.com/AhaOfficial/vue-state-store","last_synced_at":"2025-04-13T01:33:21.501Z","repository":{"id":47262683,"uuid":"285755036","full_name":"AhaOfficial/vue-state-store","owner":"AhaOfficial","description":"📮  VSS (Vue State Store) - Vue State Management (with Publish \u0026 Subscribe pattern)","archived":false,"fork":false,"pushed_at":"2020-11-23T08:28:03.000Z","size":332,"stargazers_count":130,"open_issues_count":3,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-05T18:11:57.097Z","etag":null,"topics":["nuxt","nuxt-module","nuxtjs","state","state-management","state-store","store","typescript","vue","vue-module","vuejs"],"latest_commit_sha":null,"homepage":"https://codepen.io/hmmhmmhm/pen/jOqMqGZ?editors=1010","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AhaOfficial.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-07T06:27:04.000Z","updated_at":"2024-07-28T03:19:49.000Z","dependencies_parsed_at":"2022-09-26T18:21:17.251Z","dependency_job_id":null,"html_url":"https://github.com/AhaOfficial/vue-state-store","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhaOfficial%2Fvue-state-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhaOfficial%2Fvue-state-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhaOfficial%2Fvue-state-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhaOfficial%2Fvue-state-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AhaOfficial","download_url":"https://codeload.github.com/AhaOfficial/vue-state-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223558387,"owners_count":17165121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-module","nuxtjs","state","state-management","state-store","store","typescript","vue","vue-module","vuejs"],"created_at":"2024-08-01T19:01:48.938Z","updated_at":"2024-11-07T17:30:48.096Z","avatar_url":"https://github.com/AhaOfficial.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cimg src=\"https://i.imgur.com/R2wksCG.png\" width=\"400\"/\u003e\n\n\n\n\n\n# 📮 vue-state-store (vss)\n\n\u003e Simple state management system that full supports for typescript.\n\n📬 Distributed state management module system for Vue. \u003cu\u003e[Pub \u0026 Sub model based]\u003c/u\u003e\n\n\u003cbr/\u003e\n\n## 🌎 Global\n\n\u003e The following multilingual documents are provided. (need pull request help)\n\n- ([日本語 文書](https://github.com/AhaOfficial/vue-state-store/blob/master/docs/README.JP.md)) JP contributed by @yopinoji (thx! 😊)\n\n- ([한국어 문서](https://github.com/AhaOfficial/vue-state-store/blob/master/docs/README.KR.md)) \n\n- ([Dokumenty Polskie](https://github.com/AhaOfficial/vue-state-store/blob/master/docs/README.PL.md)) PL contributed by @Milesq (🎉 so thanks!)\n\n\u003cbr/\u003e\n\n## 📔 Table of Contents\n\n* [😊 Easy use! \u0026 Powerful application!](#-easy-use--powerful-application)\n  * [💡 Advantages compared to vuex](#-advantages-compared-to-vuex)\n  * [💬 Installation](#-installation)\n  * [🔮 Devtools Apply](#-devtools-apply)\n  * [📬 Pub \u0026 Sub Model Description](#-pub--sub-model-description)\n* [😎 Basic Usage](#-basic-usage)\n  * [📮 Primitive Type Pub \u0026 Sub](#-primitive-type-pub--sub)\n  * [📮 Object Type Pub \u0026 Sub](#-object-type-pub--sub)\n  * [📮 Create state \u0026 embedded action](#-create-state--embedded-action)\n  * [📮 Binding within the Vue template](#-binding-within-the-vue-template)\n* [🚀 Advanced Usage](#-advanced-usage)\n  * [⏳ Asynchronous-tic Usage](#-asynchronous-tic-usage)\n  * [💡 Vscode Intellisense Usage](#-vscode-intellisense-usage)\n  * [📮 (Advanced) State Use Function Design Pattern](#-advanced-state-use-function-design-pattern)\n  * [📮 (Advanced) Declare-Define-Inject-Use Design Pattern](#-advanced-declare-define-inject-use-design-pattern)\n* [🤔 Q\u0026A](#-qa)\n  * [🧲 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)\n  * [👀 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)\n  * [📡 Q. Is the `.bind()` value work two way binding?](#-q-is-the-bind-value-work-two-way-binding)\n* [📔 License](#-license)\n\n\u003cbr/\u003e\n\n## 😊 Easy use! \u0026 Powerful application!\n\n`vue-state-store (vss)` is a module that is intended to completely replace the `vuex` modules that were popular with the `vue`. \u003cu\u003e**The purpose of this module is to make state management very easy by using 200% efficiency of typescript.**\u003c/u\u003e\n\n\u003cbr/\u003e\n\n### 💡 Advantages compared to vuex\n\n- **Low running curve** - Use simple publishing \u0026 subscription model\n- **Supports Typescript Intellisense** - Status \u0026 Actions \u0026 Mutation \u0026 When using variables within Templates\n- **Auto-Bind function** - Easy vue template binding.\n- **Pure typescript class based definition** - no need to use mix-in\n- **A unified action structure** - Flexible use with no distinction between action and motion.\n- **Allow flexible state use** - If you omit Mutation, you can use it as Getters.\n\n\u003cbr/\u003e\n\n### 💬 Installation\n\n\u003e (Vue2, Vue3, Nuxt is supported. Automatic binding function in Composition API : .bind(')' is supported.)\n\n```\nnpm i vue-state-store\n```\n\n\u003cbr/\u003e\n\n### 🔮 Devtools Apply\n\n\u003e `vue-state-store` supports `vue-devtools`. (You can see information about the state stores created through `vue-state-store` on the `vuex` tab.)\n\n[View Related Content](https://github.com/AhaOfficial/vue-state-store-devtools)\n\n\u003cbr/\u003e\n\n### 📬 Pub \u0026 Sub Model Description\n\n\u003e vue-state-store uses publish \u0026 subscription design patterns.\n\n`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) =\u003e data)`.\n\n\u003cbr/\u003e\n\n## 😎 Basic Usage\n\n\u003e  `vue-state-store` is an easy way to manage both \u003cu\u003estate\u003c/u\u003e and \u003cu\u003eactions\u003c/u\u003e and \u003cu\u003emutations\u003c/u\u003e through a `function` or `class`.\n\n\u003cbr/\u003e\n\n### 📮 Primitive Type Pub \u0026 Sub\n\n\u003e Primitive type means five basic types (number, string, boolean, null, undefined).  \n\n\u003cimg src=\"https://i.imgur.com/9qXpXfS.png\" width=\"600\"/\u003e\n\n\u003e 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\".\n\n\u003cbr/\u003e\n\n### 📮 Object Type Pub \u0026 Sub\n\n\u003e If you look below, you can see that there is little difference between the top and the usage.\n\u003e\n\u003e  In `store(value)`, the value can be a primary type or object.\n\n\u003cimg src=\"https://i.imgur.com/tuxGorv.png\" width=\"600\"/\u003e\n\n\u003cbr/\u003e\n\n### 📮 Create state \u0026 embedded action\n\n\u003e `vue-state-store` can define embedded actions by inheriting classes.\n\nIn `vue-state-store`, the distinction between action and motion is not required.\n\n- By creating any function in the class, you can configure **\u003cu\u003eEmbedded action\u003c/u\u003e**.\n- Any function that transforms a state without being embedded in the class is called \u003cu\u003e**Outside Action**\u003c/u\u003e.\n\n\u003cimg src=\"https://i.imgur.com/dDVAN8t.png\" width=\"600\"/\u003e\n\n\u003cbr/\u003e\n\n### 📮 Binding within the Vue template\n\n\u003e `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.\n\n-  The embedded action can be called just by calling the state through `import`.\n- The '`bind()` function automatically binds the storage into the template.\n  - It is recommended to put '$' in front of the existing storage name as a naming rule, as shown in `return { $vote: vote.bind() }` .\n  - The `.bind()` function is recommended to be used within the `setup` function of \u003cu\u003e**@vue/composition-api**\u003c/u\u003e.\n\n\u003cimg src=\"https://i.imgur.com/SQKJWe3.png\" width=\"600\"/\u003e\n\n\u003cbr/\u003e\n\n## 🚀 Advanced Usage\n\n\u003e Explain the advanced ways to use it. (This does not raise the learning curve.)\n\n\u003cbr/\u003e\n\n### ⏳ Asynchronous-tic Usage\n\n\u003e The function `.update()` and '.set()' return Promise.\n\n\u003cbr/\u003e\n\n- `await` allows certain logic to run after the update job completes when you update the storage values.\n\n\u003cimg src=\"https://i.imgur.com/aKrhrFQ.png\" width=\"600\"/\u003e\n\n  \n\n- You can also define callbacks to async that are passed to the update function.\n\n\u003cimg src=\"https://i.imgur.com/B4oHDnG.png\" width=\"600\"/\u003e\n\n\u003cbr/\u003e\n\n### 💡 Vscode Intellisense Usage\n\n\u003e  To use both **vscode** and **typescript** at the same time and need some Intellisense support, you can obtain the module below.\n\n[Vetur]: https://marketplace.visualstudio.com/items?itemName=octref.vetur\n\nIn order to receive support for intellisense in the template after installing vetur, the following option should be added to the vscode setting.\n\n```json\n\"vetur.experimental.templateInterpolationService\": true\n```\n\n\u003cbr/\u003e\n\n### 📮 (Advanced) State Use Function Design Pattern\n\n\u003e `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.\n\nState 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).\n\n\u003e This allows you to use the life cycle of the component in the state store.\n\nIf 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.\n\n`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**.\n\nEven if you modify a bound value, the changes are automatically distributed to the callbacks you are subscribing to each time the value changes.\n\n\u003cimg src=\"https://i.imgur.com/rVsbcUj.png\" width=\"600\"/\u003e\n\n\u003e 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.\n\n\u003cimg src=\"https://i.imgur.com/V00omhP.png\" width=\"600\"/\u003e\n\n\u003e To define Vue's lifecycle or `computed`, you must create one isolated function, such as `useTodo`, and must be call within the component.\n\n\u003cimg src=\"https://i.imgur.com/8q4kaBd.png\" width=\"600\"/\u003e\n\n\u003e As shown above, you can use it within the template tag immediately after using useToto(). (Of course Typescript Intellisense is still supported.)\n\n\u003cbr/\u003e\n\n### 📮 (Advanced) Declare-Define-Inject-Use Design Pattern\n\n\u003e Please check the design pattern on a separate page.\n\n[View Description](https://github.com/AhaOfficial/vue-state-store/blob/master/docs/0.advanced/README.EN.md)\n\n\u003cbr/\u003e\n\n## 🤔 Q\u0026A\n\n\u003e Questions can also be asked through the Github Issue section.\n\n  \u003cbr/\u003e\n\n### 🧲 Q. Doesn't have a $store with all the state stores like vuex?\n\n\u003e  A. No, it's not. It's a non-recommended design pattern.\n\nit'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.\n\n`vue-state-store` consists of `vue` completely independent (until it is used within the vue template tag through the `.bind()` function).\n\n\u003cbr/\u003e\n\n### 👀 Q. Will the changed value be rendered again if the `.bind()` value is changed?\n\n\u003e A. Yes, the storage values changed through the ref of vue are reflected in the DOM through template tags in real time.\n\n\u003cbr/\u003e\n\n### 📡 Q. Is the `.bind()` value work two way binding?\n\n\u003e A. Yes, the binding value changes as the storage value changes, and the storage value changes as the binding value changes.\n\n\u003cbr/\u003e\n\n\u003cbr/\u003e\n\n## 📔 License\n\n\u003e Copyright (c) 2020 AhaOfficial\n\n**MIT Licensed**\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAhaOfficial%2Fvue-state-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAhaOfficial%2Fvue-state-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAhaOfficial%2Fvue-state-store/lists"}