Skip to content

Commit

Permalink
docs: clearer implications of where to call useStore
Browse files Browse the repository at this point in the history
Closes #65
  • Loading branch information
posva committed Jan 30, 2020
1 parent c3454fe commit 1d6aee1
Showing 1 changed file with 44 additions and 2 deletions.
46 changes: 44 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export default defineComponent({
})
```

**There is one important rule for this to work**: the `useMainStore` (or any other _useStore_ function) must be called inside of deferred functions. This is to allow the Vue Composition API plugin to be installed. **Never, ever call `useStore`** like this:
**There is one important rule for this to work**: the `useMainStore` (or any other _useStore_ function) must be called inside of deferred functions. This is to allow the **Vue Composition API plugin to be installed**. **Never, ever call `useStore`** like this:

```ts
import { useMainStore } from '@/stores/main'
Expand All @@ -143,6 +143,48 @@ export default defineComponent({
})
```

Or:

```ts
import Router from 'vue-router'
const router = new Router({
// ...
})

// ❌ Depending on where you do this it will fail
const main = useMainStore()

router.beforeEach((to, from, next) => {
if (main.state.isLoggedIn) next()
else next('/login')
})
```

It must be called **after the Composition API plugin is installed**. That's why calling `useStore` inside functions is usually safe, because they are called after the plugin being installed:

```ts
export default defineComponent({
setup() {
// ✅ This will work
const main = useMainStore()

return {}
},
})

// In a different file...

router.beforeEach((to, from, next) => {
// ✅ This will work
const main = useMainStore()

if (main.state.isLoggedIn) next()
else next('/login')
})
```

⚠️: Note that if you are developing an SSR application, [you will need to do a bit more](#ssr).

Once you have access to the store, you can access the `state` through `store.state` and any getter directly on the `store` itself as a _computed_ property (from `@vue/composition-api`) (meaning you need to use `.value` to read the actual value on the JavaScript but not in the template):

```ts
Expand Down Expand Up @@ -208,7 +250,7 @@ When writing a Single Page Application, there always only one instance of the st
- `setup`
- `serverPrefetch`

Meaning that you can call `useMainStore` at the top of these functions and it will retrieve the correct store. Calling it anywhere else requires you to pass the current `req` to `useMainStore`.
Meaning that you can call `useMainStore` at the top of these functions and it will retrieve the correct store. **Calling it anywhere else requires you to pass the current `req` to `useMainStore`**.

#### Nuxt Plugin

Expand Down

0 comments on commit 1d6aee1

Please sign in to comment.