在组件之外使用 Store

Pinia Store 依靠 Pinia 实例，在所有调用中共享同一个 store 实例。大多数情况下，只需调用useStore()函数，即可开箱即用。例如，在setup()中，您无需执行任何其他操作，实际上，useStore()给你的 app 自动注入了 pinia 实例。但在组件之外，情况有些不同，意味着如果 pinia 无法自动注入实例，则必须手动将其提供给useStore()函数。你可以根据不同的应用，以不同的方式解决这个问题。

单页应用程序

如果您不做任何 SSR（服务器端渲染），则在使用 Pinia 的任何应用程序中，安装app.use(pinia)插件后，再都调用useStore()后，Pinia 才起作用：

import { useUserStore } from '@/stores/user'
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)

// ✅ 成功，因为 pinia 实例现在激活
const userStore = useUserStore()

为确保 pinia 实例被激活，最简单的方法就是将useStore()的调用，放在 pinia 创建后（createPinia()），才会执行的函数中。

让我们来看一个使用 Vue Router 的导航卫士中使用 store 的例子。

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

// ❌ 由于引入顺序的问题，这将失败
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) => {
  // ✅ 这样做是可行的，因为路由器在安装完之后就会开始导航
  // Pinia 也将被安装
  const store = useStore()

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

在外部 JS 文件中使用 Pinia

外部 js 文件，调用 Pinia usexxxStore时，解决报错：getActivePinia was called with no active Pinia. Did you forget to install pinia？。

现在有个useAccessToken状态管理：

export const useAccessToken = defineStore('accessToken', {
  state: () => ({
    accessToken: '',
    accessExpires: 0,
  }),
  getters:{},
  actions: {},
});

在其他外部 js 中使用 Pina 时，需要重新创建 pinia 实例才行：

import { createPinia } from 'pinia';
import { useAccessToken } from '@/stores';


const pinia = createPinia();
const store = useAccessToken(pinia);

为了方便多次重复使用，可以在stores目录下，创建一个 Pinia 实例文件。

# pinia.ts
import { createPinia } from 'pinia';
const pinia = createPinia();
export default pinia;

所以，其他外部文件引用此文件即可。

import pinia from '@/stores/pinia';
import { useAccessToken } from '@/stores';

const store = useAccessToken(pinia);

SSR 应用

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com