时间戳

首页 > 解决方案 > 会话存储中的 vue 设置值未反映在数据中

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

问题描述

我正在做一个 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

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

标签： vue.jsaxios

解决方案

您忽略从 fetchConfig() 函数返回的承诺（它也返回一个承诺），因此您的代码会立即执行：

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

推荐阅读