我在我的Vue應用程式中使用Vue Apollo和Vuex時遇到了問題，所以當我首次登入網站時，網頁是空的，即不包含事件和身份驗證，但是當我使用瀏覽器中的刷新按鈕刷新網站時，所有事件都會加載，甚至在網路選項卡中也可以看到身份驗證。請問有人可以告訴我我做錯了什麼嗎？
graphql.js
從 'apollo-client' 導入 { ApolloClient }; 從 'apollo-link-http' 導入 { HttpLink }； 從'apollo-cache-inmemory'導入{InMemoryCache}； 從 '@vue/apollo-option' 導入 { createApolloProvider } ； 從 '@apollo/client/link/error' 導入 { onError } ； onError(({ graphQLErrors, networkError }) => { if (graphQLErrors) graphQLErrors.map(({ 訊息, 位置, 路徑 }) => 控制台.日誌( `[GraphQL 錯誤]：訊息：${message}，位置：${locations}，路徑：${path}`， ), ）； 如果（網路錯誤）{ networkError.message = networkError.result.errors[0].debugMessage console.log(`[網路錯誤]: ${networkError}`) }; }); const XPORTAL = process.env.VUE_APP_XPORTAL 函數 getHeaders() { 常量標頭= {}； const token = window.localStorage.getItem("apollo-token"); 如果（代幣）{ headers["授權"] = `承載 ${token}`; } headers["x-portal"] = XPORTAL; headers["X-Requested-With"] = "XMLHttpRequest"; 返回標頭 } 讓 GRAPHQL = process.env.VUE_APP_API_GRAPHQL 讓 GRAPHQLPORTAL = process.env.VUE_APP_API_GRAPHQLPORTAL const graphqlClient = new ApolloClient({ 連結： new HttpLink({uri: GRAPHQL, headers: getHeaders()}), 快取：new InMemoryCache() }); const graphqlClientPortal = new ApolloClient({ 連結：新的 HttpLink({ uri: GRAPHQLPORTAL, headers: getHeaders()}), 快取：new InMemoryCache() }); 導出函數提供者() { const 提供者 = createApolloProvider({ 客戶：{ graphql客戶端， graphql客戶端門戶 }, 預設客戶端：graphqlClient， 預設選項：{ $查詢：{ fetchPolicy: '快取和網路' } }, }) 退貨提供者 } main.js
從「vue」匯入 { createApp }; 從“./App.vue”導入應用程式； 從“./router”導入路由器； 從“./store”匯入商店； 從“../../events.live/src/utils/graphql”導入*作為apolloProvider； const app = createApp(應用程式); app.use(apolloProvider.provider) 應用程式使用（商店）； 應用程式。使用（路由器）； app.mount("#app");; index.js
從“../utils/graphql”導入{provider}； 行動：{ 非同步 fetchLogin({ 提交, 狀態 }）{ 返回新的 Promise(async (resolve,reject) => { 提交（'載入狀態'，true） 嘗試 { const 回應 = 等待提供者().clients.graphqlClient.mutate({ 突變： gql`突變登入($email:String!, $password:String!) { 登入（電子郵件：$電子郵件，密碼：$密碼）{ 代幣 } }`，變數：{ 電子郵件：state.login.email， 密碼：狀態.登入.密碼 } }) const token = response.data.login.token 提交（'setToken'，令牌） localStorage.setItem('apollo-token', 令牌) } 捕獲（錯誤）{ 提交（'加載狀態'，假） } 解決（） }) }, { 非同步 fetchEvents({ 提交 }) { 嘗試 { const 回應 = 等待提供者().clients.graphqlClientPortal.query({ 查詢：gql` 查詢 LiveEvents($limit: Int!, $page: Int!){ liveEvents(分頁:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){ 全部的， 數據{ ID， 姓名， 存根， 描述， 主圖像{ ID， 烏裡 }, 地點， 類型， 佈局 聊天， 現場直播{ 結束於， 開始於 } } } } `，變數：{ 限制：12， 頁數: 0 }, }); 提交（'allEvents'，response.data.liveEvents.data）； } 捕獲（錯誤）{ console.log('錯誤訊息', error.graphQLErrors) } },
>
這是我的解決方案。
import { provider } from "../utils/graphql"; actions: { async fetchEvents({ commit }) { try { const response = await provider().clients.graphqlClientPortal.query({ query: gql` query LiveEvents($limit: Int!, $page: Int!){ liveEvents(pagination:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){ total, data{ id, name, stub, description, mainImage{ id, uri }, location, type, layout chat, liveStream{ endsAt, startsAt } } } } `, variables: { limit: 12, page: 0 }, }); commit('allEvents', response.data.liveEvents.data); } catch (error) { console.log('error-message', error.graphQLErrors) } }, async fetchLogin({ commit, state }) { return new Promise(async (resolve, reject) => { commit('loadingStatus', true) try { // Load the events before logging in await dispatch('fetchEvents'); const response = await provider().clients.graphqlClient.mutate({ mutation: gql`mutation Login($email:String!, $password:String!) { login(email:$email, password:$password){ token } }`, variables: { email: state.login.email, password: state.login.password } }) const token = response.data.login.token commit('setToken', token) localStorage.setItem('apollo-token', token) } catch (error) { commit('loadingStatus', false) } resolve() }) },