在组件外部使用商店

Pinia 商店依赖于 pinia 实例，以在所有调用中共享相同的商店实例。大多数情况下，只需调用 useStore() 函数即可开箱即用。例如，在 setup() 中，您无需执行任何其他操作。但在组件外部，情况略有不同。在幕后，useStore() 会注入您提供给 app 的 pinia 实例。这意味着如果无法自动注入 pinia 实例，则必须手动将其提供给 useStore() 函数。您可以根据正在编写的应用程序类型以不同的方式解决此问题。

单页应用程序

如果您没有进行任何 SSR（服务器端渲染），则在使用 app.use(pinia) 安装 pinia 插件后，任何 useStore() 的调用都将起作用

import { useUserStore } from '@/stores/user'
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

// ❌  fails because it's called before the pinia is created
const userStore = useUserStore()

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)

// ✅ works because the pinia instance is now active
const userStore = useUserStore()

确保始终应用此方法的最简单方法是通过将 useStore() 的调用延迟到始终在安装 pinia 后运行的函数中。

让我们看一下在 Vue Router 的导航守卫中使用商店的示例

import { createRouter } from 'vue-router'
const router = createRouter({
  // ...
})

// ❌ Depending on the order of imports this will fail
const store = useStore()

router.beforeEach((to, from, next) => {
  // we wanted to use the store here
  if (store.isLoggedIn) next()
  else next('/login')
})

router.beforeEach((to) => {
  // ✅ This will work because the router starts its navigation after
  // the router is installed and pinia will be installed too
  const store = useStore()

  if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})

SSR 应用程序

在处理服务器端渲染时，您必须将 pinia 实例传递给 useStore()。这可以防止 pinia 在不同的应用程序实例之间共享全局状态。

在 SSR 指南 中有一个专门针对它的部分，这里只是简要说明。