Vue:如何让组件提供登录用户的信息来响应会话数据？
我知道如何使用vue-session这样的Vue插件来创建和保持会话。但我不确定如何处理会话中的用户数据，特别是当涉及到反应性时。例如:我在导航头中有一个user组件，它显示当前登录的用户。如何确保通过此用户组件显示的用户名是响应式的？换句话说:如果在使用应用程序时发生登录(以启用受限功能)，那么用户组件如何知道？
$watch是正确的选择吗？但这意味着轮询，不是吗？
如何确保存储在会话插件中的用户数据是响应式的？
想象一下这样一个组件，它可视化已登录的用户：
<template>
<div>
<div v-if="user.username">
Logged in as {{user.username}}
</div>
<div v-else>
Not logged in.
</div>
</div>
</template>
<script>
export default {
name: "LoggedInUser",
data() {
return {
user: {
username: null,
email: null
}
};
},
computed: {
user() {
return { this.$session.user };
}
}
};
</script>我不想在create方法中确定会话用户，因为它应该是反应性的(对注销/登录的反应性)。
那么最好的选择是什么呢？
回答 1
Stack Overflow用户
发布于 2019-06-25 15:46:13
最好的方法是使用计算属性(就像您做的那样)，该属性使用来自Vuex商店的getter (或者Vuex中的映射getter )。存储在Vuex商店中的所有状态都是反应性的，所以你会得到你想要的东西。
不是将来自vue-session的当前用户存储在$session中，而是将其存储在Vuex存储中。
关于vue-session
我快速浏览了一下这个插件和它的source (只有大约100行)，其中肯定没有reactivity选项。它本质上是window.localStorage上的一个方便的接口。$watch仅适用于此插件不提供的反应式数据(例如，组件的data对象)。
不过，我想可以用Vue.observable(object)对Reactivity进行改造。
关于反应性的一个很好的读物：https://stackoverflow.com/a/54492326/1030527
https://stackoverflow.com/questions/56748886
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号