vue-state-composer
Very lightweight, non-centralized, typesafe, hydratable state management based on the Composition Api.
- Inspired by pinia for DevTools support and for using the Composition API in the first place
- Building on Vue States for non-centralized, hydratable state management
⚠️ This project is experimental ⚠️
Defining a Store
// @/stores/counter.ts
Using a Store
There are three ways to use a store:
counterStore.use(id?: string)
to get a new (local) instance.counterStore.useProvider(id?: string)
to get a new instance and automatically provide to child componentscounterStore.useConsumer()
to get an instance previously provided by a parent component
The id should be used as a unique identifier, if multiple instances of the same store may be used across the app. This allows to correctly hydrate after SSR and for better DevTools support.
Local
// @/components/counter.vue<template> <div> {{ count }} <button @click="increment">Increment</button> </div></template> <script>import counterStore from '@/stores/counter' export default { setup() { const { count, increment } = counterStore.use() return { count, increment, } },}</script>
Provider
// @/app.vue
Consumer
// @/components/checkout.vue<template> <button @click="checkout" /></template> <script>import basketStore from '@/stores/counter' export default { setup() { const { checkout } = basketStore.useConsumer() return { checkout, } },}</script>
DevTools
// main.ts new Vue
Universal Apps
// main.ts new Vue
// entry-server.tsrouter.onReady
// index.html<body> // inject hydration data to window {{{ renderState({ contextKey: 'composerState', windowKey: '__COMPOSER_STATE__' }) }}}</body>
License
Copyright (c) 2020-present, Johannes Lamberts