From 10c02f0028f4ca095122b341b542fc0655072e3e Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Wed, 27 Nov 2019 11:48:44 +0100 Subject: [PATCH] docs: add more --- README.md | 36 ++++++++++++++++++++++++++++++++---- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 790d3244..0284d2ae 100644 --- a/README.md +++ b/README.md @@ -8,9 +8,9 @@ Demo (TODO link) -⚠⚠⚠ This project is experimental, it's an exploration of whan a _Store_ could be like using [the composition api](https://vue-composition-api-rfc.netlify.com). It works for Vue 2 by using the [official library](https://github.com/vuejs/composition-api). +⚠️⚠️⚠️ This project is experimental, it's an exploration of what a _Store_ could be like using [the composition api](https://vue-composition-api-rfc.netlify.com). It works for Vue 2 by using the [official library](https://github.com/vuejs/composition-api). -What I want is to maybe inspire others to think about ways to improve Vuex. +What I want is to inspire others to think about ways to improve Vuex and come up with something that works very well with the composition api but that can also be used **without it**. There are the core principles that I try to achieve with this experiment: @@ -18,7 +18,7 @@ There are the core principles that I try to achieve with this experiment: - Light layer on top of Vue 💨 keep it under 1kg gzip - Only `state` and `getters` 👐 `patch` is the new _mutation_ - Actions are just functions ⚗️ Group your business there -- import what you need, let webpack code split 📦 And you won't need modules! +- Import what you need, let webpack code split 📦 No need for dynamically registered modules - SSR support ⚙️ - DevTools support 💻 Which is crucial to make this enjoyable @@ -95,7 +95,7 @@ export default createComponent({ }) ``` -**There is one important rule for this to work**: the `useMainStore` (or any other _useStore_ function) must be called inside of deffered functions. This is to allow the Vue Composition API plugin to be installed. \*\*Never, ever call `useStore` like this: +**There is one important rule for this to work**: the `useMainStore` (or any other _useStore_ function) must be called inside of deffered functions. This is to allow the Vue Composition API plugin to be installed. **Never, ever call `useStore`** like this: ```ts import { useMainStore } from '@/stores/main' @@ -237,6 +237,34 @@ export async function orderCart() { } ``` +#### Creating _Pinias_ + +_Not implemented_. Replaces the examles above + +Combine multiple _stores_ (gajos) into a new one: + +```ts +import { pinia } from 'pinia' +import { useUserStore } from './user' +import { useCartStore, emptyCart } from './cart' + +export const useCartUserStore = pinia([useUserStore, useCartStore], { + combinedGetter: state => + `Hi ${user.state.name}, you have ${cart.state.list.length} items in your cart. It costs ${cart.price}.`, +}) + +export async function orderCart() { + const store = useCartUserStore() + + try { + await apiOrderCart(store.state.user.token, store.state.cart.items) + emptyCart() + } catch (err) { + displayError(err) + } +} +``` + ## Related ## License -- 2.47.2