Vuex |地图状态 - 页面刷新时 beforeMount() 中的范围问题答案

【问题标题】：Vuex | Map state - Scoping issue in beforeMount() on page refreshVuex |地图状态 - 页面刷新时 beforeMount() 中的范围问题
【发布时间】：2019-08-22 09:43:45
【问题描述】：

我在使用 Vuex mapState 时遇到了范围问题。我需要在页面上本地输出用户名，而不会被我的输入字段中的 v-model 响应更新（对于相同的用户名数据）。

以下代码可以正常工作，但是如果用户刷新页面，状态会丢失并返回为未定义。

computed: {
  ...mapState(["userProfile"]),
},

beforeMount() {
  this.localUserProfile.name = this.userProfile.name;
  console.log("localUserProfile: " + this.localUserProfile.name); 
},

【问题讨论】：

您应该将 vuex 状态存储在 localStorage（或 sessionStorage）中，以防您想在页面刷新后保留它。您可以使用vuex-persistedstate 或类似的插件

标签： vue.js vuejs2 vuex

【解决方案1】：

我认为可能发生的情况是您在 Vuex 中的 userProfile 数据仅在您直接刷新页面时安装组件后才设置？在这种情况下，userProfile.name 在分配时可能仍然未定义。如果发生这种情况，您可以在此组件中添加一个观察程序，检查 userProfile 中的更改，如果在挂载期间尚未设置 localProfile，则更新它。

另外：你看过 v-once 指令了吗？ https://vuejs.org/v2/api/#v-once 这应该可以防止在值更改时更新用户名，而无需引用本地副本。

【讨论】：