在外部 JS 文件中使用 Pinia

在组件之外使用 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: '',
  }),
  getters:{},
  actions: {},
});

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

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


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

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

# pinia.js
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 在不同的应用程序实例之间共享全局状态

你可能感兴趣的:(javascript,pinia)