如何更改vue组件中的数据

Question

在Vue组件中，我有一些来自本地存储的数据。

if (localStorage.getItem("user") !== null) {
const obj_user = localStorage.getItem('user');
var user = JSON.parse(obj_user);
} else {
user = null;
}
return {
user
}

在这个组件中之后，我必须检查这些数据。我喜欢这个

<li v-if="!user"><a href="/login">Login</a></li>
<li v-if="user">
<a href="#"><span>{{user.name}}</span></a>
</li>

但是数据不会立即更改，而是在重新加载页面之后才更改。在我登录页面并将用户重定向到另一个页面后，我仍然会看到登录链接。我做错了什么？也许还有其他方法可以检查和输出组件中本地存储的数据？提前谢谢。

Answer 1

看起来问题可能与它们有关，因为user变量不是一段反应性有状态数据。你的问题中没有足够的代码让我们确定，但看起来你已经接近于在Vue中掌握正确的方法。

我想我的解决方案应该是这样的。。。

export default {
data() {
return {
user: null,
}
},
methods: {
loadUser() {
let user = null;
if (localStorage.getItem("user")) {
const obj_user = localStorage.getItem("user");
user = JSON.parse(obj_user);
}
this.user = user;
}
},
created() {
this.loadUser();
}
}

我将user保存在data区域中，以便模板在值更改时对其作出反应。

loadUser方法是分开的，这样就可以从不同的地方调用它，比如从用户登录事件调用，但我要确保从组件的created事件调用它。

事实上，我倾向于将user放入Vuex存储中，并将loadUser方法放入操作中，这样它就可以更全局地可用。