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

【问题标题】：vue set value in session storage not reflecting in data会话存储中的vue设置值未反映在数据中
【发布时间】：2019-07-09 07:05:50
【问题描述】：

我正在执行 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.js axios

【解决方案1】：

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

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

【讨论】：

然后创建一个包装 new Vue... 的函数并在 .then() 和 .catch() 中调用它，只要这样做是正确的......你会延迟启动应用程序，所以你最终可能会得到FOUC，所以你只需要处理它。你可以在 body 上添加一些简单的样式。
将axios 调用移动到created 中的created 方法中，就读取值而言，使用computed property 并检查sessionStorage 是否有你的变量，如果不是，返回一个默认值——比如 false、undefined、null、''、0、"loading" 等。