From: Jerald Vinfrank <46400789+JeraldVin@users.noreply.github.com> Date: Mon, 22 Aug 2022 09:48:56 +0000 (+0530) Subject: docs: corrections and improvements (#1579) X-Git-Tag: pinia@2.0.21~3 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3788e90ca7d6bbaa13edcc67ae609b8199288386;p=thirdparty%2Fvuejs%2Fpinia.git docs: corrections and improvements (#1579) Co-authored-by: Jerald Vinfrank Co-authored-by: Eduardo San Martin Morote --- diff --git a/README.md b/README.md index a09581c5..1a0c91cd 100644 --- a/README.md +++ b/README.md @@ -135,9 +135,33 @@ npm install pinia @vue/composition-api Create a pinia (the root store) and pass it to app: ```js +// Vue 3 +import { createApp } from 'vue' import { createPinia } from 'pinia' +import App from './App.vue' -app.use(createPinia()) +const pinia = createPinia() +const app = createApp(App) + +app.use(pinia) +app.mount('#app') +``` + +```js +// Vue 2 +import { createPinia, PiniaVuePlugin } from 'pinia' + +Vue.use(PiniaVuePlugin) +const pinia = createPinia() + +new Vue({ + el: '#app', + // other options... + // ... + // note the same `pinia` instance can be used across multiple Vue apps on + // the same page + pinia, +}) ``` ### Create a Store diff --git a/packages/docs/cookbook/composables.md b/packages/docs/cookbook/composables.md index 293b17d9..bca392df 100644 --- a/packages/docs/cookbook/composables.md +++ b/packages/docs/cookbook/composables.md @@ -86,7 +86,7 @@ In [Setup Stores](#setup-stores), you need to use a helper named `skipHydrate()` import { defineStore, skipHydrate } from 'pinia' import { useEyeDropper, useLocalStorage } from '@vueuse/core' -const useColorStore = defineStore('colors', () => { +export const useColorStore = defineStore('colors', () => { const { isSupported, open, sRGBHex } = useEyeDropper() const lastColor = useLocalStorage('lastColor', sRGBHex) // ... diff --git a/packages/docs/core-concepts/actions.md b/packages/docs/core-concepts/actions.md index 5d92d5c0..a68ee338 100644 --- a/packages/docs/core-concepts/actions.md +++ b/packages/docs/core-concepts/actions.md @@ -8,11 +8,12 @@ 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('main', { +export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { + // since we rely on `this`, we cannot use an arrow function increment() { this.count++ }, @@ -58,9 +59,9 @@ Actions are invoked like methods: ```js export default defineComponent({ setup() { - const main = useMainStore() + const store = useCounterStore() // call the action as a method of the store - main.randomizeCounter() + store.randomizeCounter() return {} }, @@ -99,7 +100,7 @@ You can directly call any action as a method of the store: ```js export default { setup() { - const store = useStore() + const store = useCounterStore() store.randomizeCounter() }, @@ -121,7 +122,7 @@ For the following examples, you can assume the following store was created: import { defineStore } from 'pinia', -const useCounterStore = defineStore('counter', { +export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), @@ -135,7 +136,7 @@ const useCounterStore = defineStore('counter', { ### With `setup()` -While Composition API is not for everyone, the `setup()` hook can make using Pinia easier to work with in the Options API. No extra map helper functions needed! +While Composition API is not for everyone, the `setup()` hook can make using Pinia easier to work within the Options API. No extra map helper functions needed! ```js import { useCounterStore } from '../stores/counter' @@ -169,7 +170,7 @@ export default { // same as calling from store.increment() ...mapActions(useCounterStore, ['increment']) // same as above but registers it as this.myOwnName() - ...mapActions(useCounterStore, { myOwnName: 'doubleCount' }), + ...mapActions(useCounterStore, { myOwnName: 'increment' }), }, } ``` @@ -217,14 +218,14 @@ const unsubscribe = someStore.$onAction( unsubscribe() ``` -By default, _action subscriptions_ are bound to the component where they are added (if the store is inside a component's `setup()`). Meaning, they will be automatically removed when the component is unmounted. If you want to keep them after the component is unmounted, pass `true` as the second argument to _detach_ the _action subscription_ from the current component: +By default, _action subscriptions_ are bound to the component where they are added (if the store is inside a component's `setup()`). Meaning, they will be automatically removed when the component is unmounted. If you also want to keep them after the component is unmounted, pass `true` as the second argument to _detach_ the _action subscription_ from the current component: ```js export default { setup() { const someStore = useSomeStore() - // this subscription will be kept after the component is unmounted + // this subscription will be kept even after the component is unmounted someStore.$onAction(callback, true) // ... diff --git a/packages/docs/core-concepts/getters.md b/packages/docs/core-concepts/getters.md index 6077f0f0..6ecb9f3a 100644 --- a/packages/docs/core-concepts/getters.md +++ b/packages/docs/core-concepts/getters.md @@ -8,7 +8,7 @@ Getters are exactly the equivalent of [computed values](https://vuejs.org/guide/essentials/computed.html) 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('main', { +export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), @@ -21,7 +21,7 @@ export const useStore = defineStore('main', { 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('main', { +export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), @@ -49,7 +49,7 @@ Then you can access the getter directly on the store instance: