Skip to content

Commit

Permalink
docs: add more
Browse files Browse the repository at this point in the history
  • Loading branch information
posva committed Nov 27, 2019
1 parent 85a5dde commit 10c02f0
Showing 1 changed file with 32 additions and 4 deletions.
36 changes: 32 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@

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:

- Flat modular structure 🍍 No nesting, only stores, compose them as needed
- 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

Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 10c02f0

Please sign in to comment.