Vue composable store
The original idea was spoilered in a video about Vuex 5 draft by the maker (Kia King Ishii). I never liked the current syntax, but this new API made me to want to use it ASAP. So I started to implement it, for fun and for internal use in some hobby project.
It's not supposed to be a replacement of Vuex. It's just a fun project for me.
Currently its pretty lightweight: 1.26 KB minified (625 byte Gzipped) - with stripped asserts
It's supports plugins, app-scoped stores and TypeScript.
Do NOT use it in production environment. It's under continuous refactor, and as soon as Vuex 5 released it's will be useless anyway.
Peer dependencies
- Vue 3.0 or higher
Installation
npm i vue-composable-store
NOTE: There is a "hidden" production build in the dist folder which is ~30% smaller due to stripped asserts.
;
Usage
The Options API not supported!
defineStore() - the way you define your store
;; 'shop' { // state const list = ; const page = ; const limit = ; // actions const hasNext = ; { // ...fetch data into `list`... pagevalue = page; } // final store object return hasNext list: // <---- in case you do not want it to be modifiable from outside page load ;};
use() - the way you compose stores (replacement for store modules)
;; // imported just in the component which using the store,// so it's can be properly code-splitted/tree-shaken, etc; 'shop' { // state const products = ; { // ...fetch data into `list`... pagevalue = page; } // final store object return cart: // <--- store composition instead of store modules products load ;};
useStore() - the way you access your store in components
;;; name: 'ProductList' { // the store lazy initialized on the first use const load list hasNext = ; ; return list hexNext ; };
createStore() - how you connect it to your app
;;; const store = ; const app = ;app;app;
Plugins
Plugins was not really explained in the video (outside of the provide function) so the hooks bellow are my own implementation and will be different in Vuex 5
Providing your plugin
Plugins can provide utility function or data object to be exposed in the storeContext
.
// api-plugin.js { ;} // app.js;;;; const options = plugins: apiPlugin ;const vueStore = ;const app = ;app; // optionally you can pass the `options` at the app.use() too// in this case the plugin list will be overridden// app.use(vueStore, options) // my-store.js'my-store' { // <-- `api` in the context // you can use your api() plugin here... return {};};
Hooks
The usable hooks are passed in the second argument of the plugin.
// my-plugin.js => { /* plugin code */};
The first two arguments passed to the callback functions are always:
- The
name
of the store which triggered the callback - The
storeInstance
contains the exact object which is returned from the initializer function passed todefineStore()
.
onUse(callback: (storeName, storeInstance, context) => void)
Called every time a store is being accessed by the useStore()
or composed via use()
.
The context
is the same as in the defineStore
, you can use it to access or detect other plugins
Example:
// my-store-logger.js { ;}
onInitialized(callback: (storeName, storeInstance, context) => void)
Called once per store per app after the first time usage of useStore()
or composed via use()
// my-store-logger.js { ;}
onAction(callback: (storeName, storeInstance, actionName, actionArgs, actionResult, context) => void)
Called after a store function invoked.
// my-store-logger.js { ;}
onMutated(callback: (storeName, storeInstance, stateKey, value, oldValue, context) => void)
Called when any watchable store property mutated (the value changed).
// my-store-logger.js { ;}
Changelog
See the CHANGELOG.md
License
Copyright © 2020 Kövesdi György
Licensed under the MIT License.