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

我可以看到，当我通过sessions存储未定义的值时，已在会话存储中成功设置了值，但在另一个组件中已成功设置了这些值。但是如果刷新页面或单击另一个按钮，则该值可以正常工作。.我认为这与Vue在axios完成之前呈现数据有关。是否有解决此问题的好方法？理想情况下，我应该能够从服务器获取数据，保存到会话存储中并在组件的数据中访问它... 任何Vue专家plz

Answer 1

您将忽略从fetchConfig（）函数返回的promise（该函数还会返回一个promise），因此您的代码将立即执行：

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

会话存储中的vue设置值未反映在数据中

1 个答案: