From a4829929eb89c47b6942dcaac1ce1f5e432e42f9 Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Fri, 11 Feb 2022 03:41:33 -0500 Subject: [PATCH] docs: clarify import store requirement in Options API usage (#1044) --- packages/docs/core-concepts/actions.md | 53 ++++++++++++++++++++++++-- packages/docs/core-concepts/getters.md | 53 +++++++++++++++++++++++--- packages/docs/core-concepts/state.md | 52 ++++++++++++++++++++++--- 3 files changed, 143 insertions(+), 15 deletions(-) diff --git a/packages/docs/core-concepts/actions.md b/packages/docs/core-concepts/actions.md index 8db70d68..edcdcd1f 100644 --- a/packages/docs/core-concepts/actions.md +++ b/packages/docs/core-concepts/actions.md @@ -105,20 +105,65 @@ export default { } ``` -## Usage with the options API +## Usage with the Options API -If you are not using the composition API, and you are using `computed`, `methods`, ..., you can use the `mapActions()` helper to map actions properties as methods in your component: +For the following examples, you can assume the following store was created: + +```js +// Example File Path: +// ./src/stores/counterStore.js + +import { defineStore } from 'pinia', + +const useCounterStore = defineStore('counterStore', { + state: () => ({ + counter: 0 + }), + actions: { + increment() { + this.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! + +```js +import { useCounterStore } from '../stores/counterStore' + +export default { + setup() { + const counterStore = useCounterStore() + + return { counterStore } + }, + methods: { + incrementAndPrint() { + counterStore.increment() + console.log('New Count:', counterStore.count) + }, + }, +} +``` + +### Without `setup()` + +If you would prefer not to use Composition API at all, you can use the `mapActions()` helper to map actions properties as methods in your component: ```js import { mapActions } from 'pinia' +import { useCounterStore } from '../stores/counterStore' export default { methods: { // gives access to this.increment() inside the component // same as calling from store.increment() - ...mapActions(useStore, ['increment']) + ...mapActions(useCounterStore, ['increment']) // same as above but registers it as this.myOwnName() - ...mapActions(useStore, { myOwnName: 'doubleCounter' }), + ...mapActions(useCounterStore, { myOwnName: 'doubleCounter' }), }, } ``` diff --git a/packages/docs/core-concepts/getters.md b/packages/docs/core-concepts/getters.md index dc4d0cb5..ba5530e1 100644 --- a/packages/docs/core-concepts/getters.md +++ b/packages/docs/core-concepts/getters.md @@ -84,7 +84,6 @@ export const useStore = defineStore('main', { }) ``` - ## Passing arguments to getters _Getters_ are just _computed_ properties behind the scenes, so it's not possible to pass any parameters to them. However, you can return a function from the _getter_ to accept any arguments: @@ -113,7 +112,7 @@ export default { ``` @@ -165,20 +164,64 @@ export default { } ``` -## Usage with the options API +## Usage with the Options API + +For the following examples, you can assume the following store was created: + +```js +// Example File Path: +// ./src/stores/counterStore.js + +import { defineStore } from 'pinia', + +const useCounterStore = defineStore('counterStore', { + state: () => ({ + counter: 0 + }), + getters: { + doubleCounter() { + return this.counter * 2 + } + } +}) +``` + +### 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! + +```js +import { useCounterStore } from '../stores/counterStore' + +export default { + setup() { + const counterStore = useCounterStore() + + return { counterStore } + }, + computed: { + quadrupleCounter() { + return counterStore.doubleCounter * 2 + }, + }, +} +``` + +### Without `setup()` You can use the same `mapState()` function used in the [previous section of state](./state.md#options-api) to map to getters: ```js import { mapState } from 'pinia' +import { useCounterStore } from '../stores/counterStore' export default { computed: { // gives access to this.doubleCounter inside the component // same as reading from store.doubleCounter - ...mapState(useStore, ['doubleCount']) + ...mapState(useCounterStore, ['doubleCount']) // same as above but registers it as this.myOwnName - ...mapState(useStore, { + ...mapState(useCounterStore, { myOwnName: 'doubleCounter', // you can also write a function that gets access to the store double: store => store.doubleCount, diff --git a/packages/docs/core-concepts/state.md b/packages/docs/core-concepts/state.md index 19e8b83e..7d51d63b 100644 --- a/packages/docs/core-concepts/state.md +++ b/packages/docs/core-concepts/state.md @@ -47,20 +47,59 @@ const store = useStore() store.$reset() ``` -### Usage with the options API +### Usage with the Options API -If you are not using the composition API, and you are using `computed`, `methods`, ..., you can use the `mapState()` helper to map state properties as readonly computed properties: +For the following examples, you can assume the following store was created: + +```js +// Example File Path: +// ./src/stores/counterStore.js + +import { defineStore } from 'pinia', + +const useCounterStore = defineStore('counterStore', { + state: () => ({ + counter: 0 + }) +}) +``` + +### 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! + +```js +import { useCounterStore } from '../stores/counterStore' + +export default { + setup() { + const counterStore = useCounterStore() + + return { counterStore } + }, + computed: { + tripleCounter() { + return counterStore.counter * 3 + }, + }, +} +``` + +### Without `setup()` + +If you are not using the Composition API, and you are using `computed`, `methods`, ..., you can use the `mapState()` helper to map state properties as readonly computed properties: ```js import { mapState } from 'pinia' +import { useCounterStore } from '../stores/counterStore' export default { computed: { // gives access to this.counter inside the component // same as reading from store.counter - ...mapState(useStore, ['counter']) + ...mapState(useCounterStore, ['counter']) // same as above but registers it as this.myOwnName - ...mapState(useStore, { + ...mapState(useCounterStore, { myOwnName: 'counter', // you can also write a function that gets access to the store double: store => store.counter * 2, @@ -79,15 +118,16 @@ If you want to be able to write to these state properties (e.g. if you have a fo ```js import { mapWritableState } from 'pinia' +import { useCounterStore } from '../stores/counterStore' export default { computed: { // gives access to this.counter inside the component and allows setting it // this.counter++ // same as reading from store.counter - ...mapWritableState(useStore, ['counter']) + ...mapWritableState(useCounterStore, ['counter']) // same as above but registers it as this.myOwnName - ...mapWritableState(useStore, { + ...mapWritableState(useCounterStore, { myOwnName: 'counter', }), }, -- 2.47.3