counter: 0,
}),
actions: {
- reset() {
- this.counter = 0
+ randomizeCounter() {
+ this.counter = Math.round(100 * Math.random())
},
},
})
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')
+ }
+ },
+ },
+})
+```
},
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'
<!-- 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`