刷新页面时，路由不填充数据
刷新页面时，路由不填充数据
提问于 2020-01-20 11:35:50
我有一个非常基本的网站使用Vue.JS，VueX和Vue路由器。
我定义了两个路由：'#/‘和'#/account/’这两个路由在.vue文件中填充了两个组件，通过http-vue-loader在页面加载时动态加载(以避免与webpack/等打交道，因为项目太小了)。
“#/”视图是静态组件。
“#/account”视图在<input type="text">框中显示用户的名字和姓氏。
如果我从“#/”导航到“#/account”页面，则名/姓已正确填充。但如果我随后刷新浏览器，文本框将变为空，并且直到我导航到另一条路线并再次返回后才会重新填充。
此组件中的数据是从全局VueX存储加载的，该存储在页面加载时作为AJAX调用的结果被commit()ted。
为什么这些字段不会在页面刷新时填充？
相关代码：
main.js：(作为<script type="module">从主html文件加载)
const store = new Vuex.Store({
state: {
user: {firstname: '', lastname: ''}
},
mutations: {
updateUser(state, user){
state.user = { ...user }
}
}
})
$(document).ready(function() {
let templates = {}
templates.home = httpVueLoader('./templates/home.vue')
templates.account = httpVueLoader('./templates/account.vue')
templates.not_found = httpVueLoader('./templates/404.vue')
// Set up routes:
const routes = [
{ path: '/', component: templates.home },
{ path: '/account', component: templates.account },
// Not found: (place this route last)
{ path: '*', component: templates.not_found }
]
const router = new VueRouter({ routes })
// Start Vue app:
const app = new Vue({
router,
store,
components: {
}
}).$mount('#vueApp')
checkLogin() // Check if user is logged in - if so, populate VueX store with user info.
function checkLogin() {
// Check if user is already logged on.
console.log("Checking for login...")
Get({
url: 'https://[api-url]/v1/auth'
})
.then((result) => {
console.log("Result: ", result)
if (result.data.logged_in) {
loadUI()
store.commit('updateUser', result.data.user)
}
else
{
logout()
}
})
}account.vue：
<template>
...
<input type="text" class="form-control" id="txtFirstname" aria-describedby="txtFirstnameHelp" v-model="firstname">
...
<input type="text" class="form-control" id="txtLastname" aria-describedby="txtLastnameHelp" v-model="lastname">
...
</template>
<script>
module.exports = {
data: function() {
return {
firstname: this.$store.state.user.firstname,
lastname: this.$store.state.user.lastname
}
},
...
</script>
<style scoped>
</style>回答 1
Stack Overflow用户
发布于 2020-01-20 11:44:56
修复方法是将这些属性声明为计算属性，而不是在data对象中返回它们：
在Account.vue中：
module.exports ={ data: function() { return {
}
},
computed: {
firstname: function() { return this.$store.state.user.firstname },
lastname: function() { return this.$store.state.user.lastname }
},..。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59816704
复制相关文章
相似问题
腾讯云开发者
