docs: clarify import store requirement in Options API usage (#1044)

Author: bencodezen

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' }),
   },
 }
 ```

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 {
 </script>
 
 <template>
-User 2: {{ getUserById(2) }}
+  <p>User 2: {{ getUserById(2) }}</p>
 </template>
 ```
 
@@ -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,

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',
     }),
   },