title: how to use pinia store in a vue router navigation guard?
body: <p>I'm using Vuejs 3, vuerouter 4 and pinia and trying to put a <a href="https://router.vuejs.org/guide/advanced/navigation-guards.html" rel="nofollow noreferrer">navigation guard</a> in some routes, as per the example in the documentation (<em>if a user is not authenticated and is not on the login page, send the user to login page to get authenticated</em>). This is explained also in <a href="https://pinia.vuejs.org/core-concepts/outside-component-usage.html#single-page-applications" rel="nofollow noreferrer">pinia documentation</a> on use of pinia outside of components. But I can't get my head around it.</p>
  <p>The store I use is currently simple (return false or true on <code>isAuthenticated</code>):</p>
  <pre class="lang-js prettyprint-override"><code>//authStore.js
  import { defineStore } from &quot;pinia&quot;;
  
  export const useAuthStore = defineStore( 'AuthStore', {
  
    state: () =&gt; {
      return {
        isAuthenticated: false
      }
    }
  
  })
  </code></pre>
  <p>I want to use this <code>isAuthenticated</code> in a <code>beforeEnter</code> in <code>routes/index.js</code></p>
  <p>In main.js:</p>
  <pre class="lang-js prettyprint-override"><code>
  import { useAuthStore } from '@/stores/authStore'
  import { createApp } from 'vue'
  import App from './App.vue'
  import router from '@/router'
  import { createPinia } from 'pinia'
  
  const app = createApp(App)
  app.use(createPinia()).use(router)
  app.mount('#app')
  
  // I'm not using authStore in this file, so this raises an error:
  const authStore = useAuthStore()
  </code></pre>
  <p>And in router/index.js:</p>
  <pre class="lang-js prettyprint-override"><code>import { createRouter, createWebHistory } from 'vue-router'
  
  const routes = [
    // path for login page,
    {
      path: '/adm/home',
      name: 'AdmView',
      component: () =&gt; import('@/views/adm/AdmView.vue'),
      beforeEnter: (to) =&gt; {
        // error: authStore is not defined
        const isAuthenticated = authStore
        if ( !isAuthenticated &amp;&amp; to.name !== 'login-adm' ) {
          return { name: 'login-adm' }
        }
      }
    },
    // other paths
  ]
  </code></pre>