]> git.ipfire.org Git - thirdparty/vuejs/pinia.git/commitdiff
docs: getters and actions
authorEduardo San Martin Morote <posva13@gmail.com>
Tue, 23 Mar 2021 09:07:55 +0000 (10:07 +0100)
committerEduardo San Martin Morote <posva13@gmail.com>
Tue, 23 Mar 2021 09:07:55 +0000 (10:07 +0100)
docs/core-concepts/actions.md
docs/core-concepts/getters.md
docs/core-concepts/state.md

index 651a4ee987249267d8ad85f3476abe64954a0c04..319accc08d8c4aad93b8ffdb7c7536910c3fca65 100644 (file)
@@ -9,8 +9,8 @@ export const useStore = defineStore({
     counter: 0,
   }),
   actions: {
-    reset() {
-      this.counter = 0
+    randomizeCounter() {
+      this.counter = Math.round(100 * Math.random())
     },
   },
 })
@@ -25,9 +25,34 @@ export default defineComponent({
   setup() {
     const main = useMainStore()
     // call the action as a method of the store
-    main.reset()
+    main.randomizeCounter()
 
     return {}
   },
 })
 ```
+
+## Accessing other stores actions
+
+To use another store, you can directly _use it_ inside of the _getter_:
+
+```js
+import { useOtherStore } from './other-store'
+
+export const useSettingsStore = defineStore({
+  id: 'settings',
+  state: () => ({
+    // ...
+  }),
+  actions: {
+    async fetchUserPreferences(preferences) {
+      const auth = useAuthStore()
+      if (auth.isAuthenticated) {
+        this.preferences = await fetchPreferences()
+      } else {
+        throw new Error('User must be authenticated')
+      }
+    },
+  },
+})
+```
index e11cef2ef0f01b2a9283abdda49583f2b868f7da..1b837fd6c54de8c3b9ada1382bf4da5982a36271 100644 (file)
@@ -52,15 +52,15 @@ export const useStore = defineStore({
     },
     doubleCountPlusOne() {
       // autocompletion ✨
-      return this.doubleCount * 2
+      return this.doubleCount + 1
     },
   },
 })
 ```
 
-## Accessing other stores
+## Accessing other stores getters
 
-To access a different store, you can directly _use_ the other store inside of a `getter`
+To use another store getters, you can directly _use it_ inside of the _action_:
 
 ```js
 import { useOtherStore } from './other-store'
index af650421489234897017ffcd4cf9f0effd3cb7fc..858ddfa8e6afe1a04e1b7a08df7a31f9412b36f0 100644 (file)
@@ -42,7 +42,7 @@ store.$patch({
 
 <!-- TODO: disable this with `strictMode`, `{ noDirectPatch: true }` -->
 
-The main difference here is that `$patch()` allows you to group multiple changes into one single entry in the devtools. Note **both, direct changes to `state` and `$patch()` appear in the devtools**.
+The main difference here is that `$patch()` allows you to group multiple changes into one single entry in the devtools. Note **both, direct changes to `state` and `$patch()` appear in the devtools** and can be time travelled (not yet in Vue 3).
 
 ## Replacing the `state`