javascript - 如何正确安装 Pinia Store？

Question

我正在使用 OptionsAPI 和 Pinia Store 构建一个 Vue 3 应用程序，但我经常遇到一个问题，指出我试图在 createPinia() 之前访问该商店叫做。
我一直在关注文档以在组件外部使用 Pinia 商店，但也许我没有以正确的方式做某事。
情况如下:
我有一个登录屏幕( /login )，其中有一个 Cognito session 管理器，我单击一个链接，完成 Cognito 的注册过程，然后被重定向到主路由( / )，在这条路由中我还有一个显示 Dashboard 的子路由我进行 API 调用的组件。
在 Home我使用 useMainStore() 调用商店的组件然后在我从 Cognito 重定向后使用 URL 上的信息更新状态，然后我想在 Dashboard 内的 API 调用中使用一些状态信息.
这是我的Home组件，由于具有 const store = useMainStore();，它本身可以正常工作里面mounted()我想象的钩子(Hook)总是在创建 Pinia 实例后调用。

<template>
  <div class="home">
    <router-view></router-view>
  </div>
</template>

<script>
import {useMainStore} from '../store/index'

export default {
  name: 'Home',
  components: {
  },
  mounted() {
    const store = useMainStore();

    const paramValues = {}

    const payload = {
      // I construct an object with the properties I need from paramValues
    }

    store.updateTokens(payload); // I save the values in the store
  },
}
</script>

现在这是我的 Dashboard零件:

<script>
import axios from 'axios'
import {useMainStore} from '../store/index'

const store = useMainStore();

export default {
    name: "Dashboard",
    data() {
    return {
        user_data: null,
      }
  },
  mounted() {
    axios({
      url: 'myAPIUrl',
      headers: { 'Authorization': `${store.token_type} ${store.access_token}`}
    }).then(response => {
      this.user_data = response.data;
    }).catch(error => {
      console.log(error);
    })
  },
}
</script>

上面的组件将失败，并抛出一个错误，指出我正在尝试在创建实例之前访问存储，我可以通过将存储声明移动到 mounted() 中来解决这个问题。像以前一样钩子(Hook)，但是如果我想在组件内部以其他方式使用存储，而不仅仅是在 mounted 中怎么办？钩？还有，为什么会失败？至此，由于 Home组件已经可以访问商店， Dashboard 不应该吗？组件，位于 Home 内的子路由内商店实例是否已经创建？
这是我的 main.js我称之为 createPinia() 的文件方法。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const pinia = createPinia();

createApp(App).use(router).use(pinia).mount('#app')

我得到的错误是: Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?我的商店文件:

import { defineStore } from 'pinia';

export const useMainStore = defineStore('main', {
  state: () => ({
    access_token: sessionStorage.getItem('access_token') || '',
    id_token: sessionStorage.getItem('id_token') || '',
    token_type: sessionStorage.getItem('token_type') || '',
    isAuthenticated: sessionStorage.getItem('isAuthenticated') || false,
    userData: JSON.parse(sessionStorage.getItem('userData')) || undefined
  }),
  actions: {
    updateTokens(payload) {
      this.id_token = payload.id_token;
      this.access_token = payload.access_token;
      this.token_type = payload.token_type

      sessionStorage.setItem('id_token', payload.id_token);
      sessionStorage.setItem('access_token', payload.access_token);
      sessionStorage.setItem('token_type', payload.token_type);
      sessionStorage.setItem('isAuthenticated', payload.isAuthenticated);
    },
    setUserData(payload) {
      this.userData = payload;
      sessionStorage.setItem('userData', JSON.stringify(payload));
    },
    resetState() {
      this.$reset();
    }
  },
})

Answer 1

这是可能的，但并不常见，而且并不总是允许使用 use组合功能在组件之外。一个函数可以依赖于组件实例或特定的执行顺序，如果不尊重它，就会发生当前问题。
必须先创建 Pinia 实例才能使用。 const store = useMainStore()在导入 Dashboard.vue 时进行评估，这总是发生在 createPinia() 之前.
在选项 API 的情况下，它可以作为组件实例的一部分分配(仅限 Vue 3):

  data() {
    return { store: useMainStore() }
  },

或公开为全局属性(仅限 Vue 3):

const pinia = createPinia();
const app = createApp(App).use(router).use(pinia);
app.config.globalProperties.mainStore = useMainStore();
app.mount('#app');