1

我正在使用 OptionsAPI 和 Pinia Store 构建一个 Vue 3 应用程序，但我经常遇到一个问题，指出我正在尝试在createPinia()调用之前访问该商店。

我一直在关注文档以在组件外部使用 Pinia 商店，但也许我没有以正确的方式做某事。

情况如下：

我有一个登录/login屏幕（我进行 API 调用。/Dashboard

在Home组件上，我使用调用 store的组件useMainStore()，然后使用从 Cognito 重定向后出现在 URL 上的信息更新状态，然后我想在内部的 API 调用中使用一些状态信息Dashboard。

这是我的Home组件，它本身可以正常工作，因为我想在创建 Pinia 实例后总是调用const store = useMainStore();内部的钩子。mounted()

<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()像以前一样通过将存储声明移动到钩子内来解决这个问题，但是如果我想使用以其他方式存储在组件内部，而不仅仅是在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();
    }
  },
})
4

2 回答 2

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');
于 2022-02-17T20:31:59.927 回答
0

由于您使用的是 Vue 3，我建议您使用新的脚本设置语法：

<script setup>
    import { reactive, onMounted } from 'vue'
    import axios from 'axios'
    import { useMainStore } from '../store'
    
    const store = useMainStore();
    
    const data = reactive({
       user_data: null
    })        
     
    onMounted (async () => {
      try {
        const {data: MyResponse} = await axios({
          method: "YOUR METHOD",
          url: 'myAPIUrl',
          headers: { 'Authorization': `${store.token_type} ${store.access_token}`}
        })
        
        data.user_data = MyResponse

      } catch(error){
            console.log(error)
        }
    })

</script>

使用 setup 您可以定义该存储变量并通过您的代码使用它。

于 2022-02-17T19:37:58.643 回答