Question

我在更新全局状态时遇到了一些问题。我正在尝试通过侦听 WebSocket 来更新该状态，但它没有按预期更新。这是我如何定义全局状态。

state: {
        userData: null
},
getters: {
  userData: state => {
        return state.userData
},
mutations: {
   GET_USER({payload}) {
  commit('GET_USER', payload)
},

我正在 App.vue 中更新它，如下所示：

mounted() {
        window.Echo.channel("user." + this.userData.id).listen(".user-updated", (user) => {
              this.$store.commit('GET_USER', JSON.stringify(user.user))
        });

当然我要关闭那个 websocket。我尝试使用 localStorage，我认为这不是一个坏主意，但我仍然使用全局状态进行操作，并且使用 localstorage 看起来像：

      localStorage.setItem('userData', JSON.stringify(user.user))

因此，当我想在某个组件（例如 Home.vue）中显示该数据时，我可以看到正在发生的事情的唯一方法是在该文件的模板中定义 {{ this.$store.getters.userData }}，但是如果我尝试在脚本数据中定义它，如下所示：

     data() {
             return {
                 data: this.$store.getters.userData,
             }
        },

它不是实时更新，而是只有当我转到另一个页面并返回此处或更新组件时。关于如何修复它的任何想法？

Answer 1

我通过访问状态获得了成功。据我了解，它也应该是反应式的 this.$store.state.userData 并反映商店的当前状态。

请记住，访问对象属性可能不会像您认为的那样具有反应性：https://vuejs.org/v2/guide/reactivity.html#For-Objects
因此，您可能希望定义一个 getter，您可以在其中访问用户名、凭据以及 userData 所拥有的任何内容。

更明确的方法是定义 store 中 userData 对象的每个属性，并为每个属性单独编写一个更改（当然，循环可以一次完成，但您仍然必须创建更改器） .

{
  state: {
    userData: {
      id: null,
      name: '',
      email: '',
      // etc.
    }
  },
  // ...
}

这样做也可以成功地与您定义的 getter 配合使用。

对于我的工作，我宁愿不信任一次处理整个对象。这是一些需要编写的额外代码，但明确定义了预期对象应具有的哪些属性对您和其他人来说是有价值的。

Vue 不更新全局状态

1 个答案: