會話存儲中的vue設置值未反映在數據中

Question

我正在進行axios調用，並在main.ts中為會話存儲設置一些值...我希望在下一個組件中獲得它。但是在main.ts中未定義...

saveConfigToSessionStorage()
new Vue({
    router,
    store,
    i18n,
    render: (h) => h(App),
  }).$mount('#app')
}

在saveurlToSessionStorage中，我只有一個方法可以執行axios調用並將其設置為會話存儲

import Axios from 'axios'

let url = '/config/myurl.json'
function fetchConfig () {
  return Axios
    .get(url)
    .then(response => {
      return response.data
    })
}


function saveurlToSessionStorage () {
  return fetchConfig().then(respons => {
    sessionStorage.setItem('URL_CONFIG', JSON.stringify(respons))
  })
}

export default saveurlToSessionStorage

我可以看到這些值已在會話存儲中成功設置，但是在另一個組件中，當我通過sessionstorage訪問它的未定義值時。但是，如果刷新頁面或在另一個按鈕中單擊，則該值可以正常工作。與Vue在axios結束之前渲染數據有關。.是否有解決此問題的好方法？ 理想情況下，我應該能夠從服務器獲取數據，保存到會話存儲中，並在組件的數據中對其進行訪問...任何Vue專家plz

Answer 1

您將忽略從fetchConfig（）函數返回的promise（該函數還會返回一個promise），因此您的代碼將立即執行：

saveConfigToSession().then(() => {
  new Vue({
    router,
    store,
    i18n,       
    render: (h) => h(App),
  }).$mount('#app')
})