From: Eduardo San Martin Morote Date: Thu, 22 Jul 2021 13:15:30 +0000 (+0200) Subject: docs: use 2 arguments syntax X-Git-Tag: v2.0.0-rc.0~28 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=09199eb489ce9974b78d782b19f74ee79ebd32d1;p=thirdparty%2Fvuejs%2Fpinia.git docs: use 2 arguments syntax --- diff --git a/README.md b/README.md index 8e0dd4e7..f52c37bf 100644 --- a/README.md +++ b/README.md @@ -130,10 +130,9 @@ You can create as many stores as you want, and they should each exist in differe ```ts import { defineStore } from 'pinia' -export const useMainStore = defineStore({ - // name of the store - // it is used in devtools and allows restoring state - id: 'main', +// main is the name of the store. It is unique across your application +// and will appear in devtools +export const useMainStore = defineStore('main', { // a function that returns a fresh state state: () => ({ counter: 0, diff --git a/docs/cookbook/composing-stores.md b/docs/cookbook/composing-stores.md index 9aba33cb..892d49a4 100644 --- a/docs/cookbook/composing-stores.md +++ b/docs/cookbook/composing-stores.md @@ -11,8 +11,7 @@ You can call `useOtherStore()` at the top of any getter an action: ```js import { useUserStore } from './user' -export const cartStore = defineStore({ - id: 'cart', +export const cartStore = defineStore('cart', { getters: { // ... other getters summary(state) { @@ -42,8 +41,7 @@ import { defineStore } from 'pinia' import { useUserStore } from './user' import { useCartStore } from './cart' -export const useSharedStore = defineStore({ - id: 'shared', +export const useSharedStore = defineStore('shared', { getters: { summary() { const user = useUserStore() @@ -64,8 +62,7 @@ import { defineStore } from 'pinia' import { useUserStore } from './user' import { useCartStore } from './cart' -export const useSharedStore = defineStore({ - id: 'shared', +export const useSharedStore = defineStore('shared', { actions: { async orderCart() { const user = useUserStore() diff --git a/docs/cookbook/options-api.md b/docs/cookbook/options-api.md index 9929b8ce..28905d67 100644 --- a/docs/cookbook/options-api.md +++ b/docs/cookbook/options-api.md @@ -16,8 +16,12 @@ If you need to access pretty much everything from the store, it might be too muc import { mapStores } from 'pinia' // given two stores with the following ids -const useUserStore = defineStore({ id: 'user' }) -const useCartStore = defineStore({ id: 'cart' }) +const useUserStore = defineStore('user', { + // ... +}) +const useCartStore = defineStore('cart', { + // ... +}) export default { computed: { diff --git a/docs/core-concepts/actions.md b/docs/core-concepts/actions.md index 116e07c5..ce59170f 100644 --- a/docs/core-concepts/actions.md +++ b/docs/core-concepts/actions.md @@ -3,8 +3,7 @@ Actions are the equivalent of [methods](https://v3.vuejs.org/guide/data-methods.html#methods) in components. They can be defined with the `actions` property in `defineStore()` and **they are perfect to define business logic**: ```js -export const useStore = defineStore({ - id: 'main', +export const useStore = defineStore('main', { state: () => ({ counter: 0, }), @@ -26,8 +25,7 @@ import { mande } from 'mande' const api = mande('/api/users') -export const useUsers = defineStore({ - id: 'users', +export const useUsers = defineStore('users', { state: () => ({ data: userData, // ... @@ -71,8 +69,7 @@ To use another store, you can directly _use it_ inside of the _action_: ```js import { useAuthStore } from './auth-store' -export const useSettingsStore = defineStore({ - id: 'settings', +export const useSettingsStore = defineStore('settings', { state: () => ({ // ... }), diff --git a/docs/core-concepts/getters.md b/docs/core-concepts/getters.md index 411d70f7..2f3b46f4 100644 --- a/docs/core-concepts/getters.md +++ b/docs/core-concepts/getters.md @@ -3,8 +3,7 @@ Getters are exactly the equivalent of [computed values](https://v3.vuejs.org/guide/reactivity-computed-watchers.html#computed-values) for the state of a Store. They can be defined with the `getters` property in `defineStore()`. They receive the `state` as the first parameter **to encourage** the usage of arrow function: ```js -export const useStore = defineStore({ - id: 'main', +export const useStore = defineStore('main', { state: () => ({ counter: 0, }), @@ -17,8 +16,7 @@ export const useStore = defineStore({ Most of the time, getters will only rely on the state, however, they might need to use other getters. Because of this, we can get access to the _whole store instance_ through `this` when defining a regular function **but it is necessary to define the type of the return type (in TypeScript)**. This is due to a known limitation in TypeScript and **doesn't affect getters defined with an arrow function nor getters not using `this`**: ```ts -export const useStore = defineStore({ - id: 'main', +export const useStore = defineStore('main', { state: () => ({ counter: 0, }), @@ -59,8 +57,7 @@ export default { As with computed properties, you can combine multiple getters. Access any other getter via `this`. Even if you are not using TypeScript, you can hint your IDE for types with the [JSDoc](https://jsdoc.app/tags-returns.html): ```js -export const useStore = defineStore({ - id: 'main', +export const useStore = defineStore('main', { state: () => ({ counter: 0, }), @@ -89,8 +86,7 @@ To use another store getters, you can directly _use it_ inside of the _action_: ```js import { useOtherStore } from './other-store' -export const useStore = defineStore({ - id: 'main', +export const useStore = defineStore('main', { state: () => ({ // ... }), diff --git a/docs/core-concepts/index.md b/docs/core-concepts/index.md index 96e5855a..44b08805 100644 --- a/docs/core-concepts/index.md +++ b/docs/core-concepts/index.md @@ -6,9 +6,9 @@ Before diving into core concepts, we need to know that a store is defined using import { defineStore } from 'pinia' // useStore could be anything like useUser, useCart -export const useStore = defineStore({ - // unique id of the store across your application - id: 'storeId', +// the first argument is a unique id of the store across your application +export const useStore = defineStore('main', { + // other options... }) ``` diff --git a/docs/core-concepts/plugins.md b/docs/core-concepts/plugins.md index 76ac628c..58ad6121 100644 --- a/docs/core-concepts/plugins.md +++ b/docs/core-concepts/plugins.md @@ -192,9 +192,7 @@ The same is true for `store.$onAction()`. It is possible to create new options when defining stores to later on consume them from plugins. For example, you could create a `debounce` option that allows you to debounce any action: ```js -defineStore({ - id: 'search', - // ... +defineStore('search', { actions: { searchContacts() { // ... diff --git a/docs/core-concepts/state.md b/docs/core-concepts/state.md index a1af14c5..67bd7a0d 100644 --- a/docs/core-concepts/state.md +++ b/docs/core-concepts/state.md @@ -5,8 +5,7 @@ The state is, most of the time, the central part of your store. People often sta ```js import { defineStore } from 'pinia' -const useStore = defineStore({ - id: 'storeId', +const useStore = defineStore('storeId', { // can also be defined with an arrow function if you prefer that syntax state() { return { @@ -167,7 +166,7 @@ Note that depending on when you create the watcher, `pinia.state.value.cart` mig ```ts import { defineStore } from 'pinia' -const useCartStore = defineStore({ +const useCartStore = defineStore('cart', { // ... }) diff --git a/docs/introduction.md b/docs/introduction.md index 8cad4e87..fbf22f98 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -10,8 +10,7 @@ You start by creating a store: // stores/counter.js import { defineStore } from 'pinia' -export const useCounterStore = defineStore({ - id: 'counter', +export const useCounterStore = defineStore('counter', { state() { return { count: 0 } }, @@ -39,8 +38,7 @@ export default { If you are still not into `setup()` and Composition API, don't worry, Pinia also support a similar set of [_map helpers_ like Vuex](https://vuex.vuejs.org/guide/state.html#the-mapstate-helper). You define stores the same way but then use `mapStores()`, `mapState()`, or `mapActions()`: ```js -const useCounterStore = defineStore({ - id: 'counter', +const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), getters: { double: (state) => state.count * 2, @@ -52,7 +50,9 @@ const useCounterStore = defineStore({ } }) -const useUserStore = defineStore({ id: 'user' }) +const useUserStore = defineStore('user', { + // ... +}) export default { computed: { @@ -83,8 +83,7 @@ Here is a more complete example of the API you will be using with Pinia **with t ```js import { defineStore } from 'pinia' -export const todos = defineStore({ - id: 'todos', +export const todos = defineStore('todos', { state: () => ({ /** @type {{ text: string, id: number, isFinished: boolean }[]} */ todos: [], diff --git a/docs/ssr/nuxt.md b/docs/ssr/nuxt.md index 580ed753..0e077201 100644 --- a/docs/ssr/nuxt.md +++ b/docs/ssr/nuxt.md @@ -45,9 +45,7 @@ export default { You can also use [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context) in any store by using the injected property `$nuxt`: ```js -defineStore({ - id: 'cart', - +defineStore('cart', { actions: { purchase() { const user = useUserStore()