Vuex：为什么嵌套对象保持未定义，即使在状态下初始化？

Question

我用一个对象定义我的状态，用一些嵌套对象初始化为一个空字符串和一个空数组，如下所示：

state: {
  displayedFarmer: {
    name: "",
    arrivalDates: []
    // some more fields...
  },
  // more vuex stuff
}

我希望如果我console.log 显示的农夫，arrivalDates 会出现。这是我在组件中跟踪它所做的：

  computed: {
    ...mapState([ 'displayedFarmer' ]),
    // more code
  },
  watch: {
    displayedFarmer: {
      handler() {
        console.log("displayedFarmer", this.displayedFarmer);
      },
      deep: true,
      immediate: true
    }
  }

出现的第一条日志行显示displayedFarmer 对象，缺少arrivalDates 和名称：

displayedFarmer 
Object { … }

（在控制台中展开时基本上只出现prototype 和__ob__ 对象）

我并不清楚这种行为，并迫使我在第一次访问字段时使用一种小型且无害的 hack 来初始化字段。

对于这个问题，我想知道的是：

1. 为什么当我通过组件访问时看不到我在状态中初始化的对象？
2. 如何以不同的方式执行此操作，以便在我第一次访问对象时初始化所有嵌套项？

Answer 1

1. watch 和 immediate: true 在组件 hook:created 之前触发。这可能是您无权访问已初始化对象的原因。
2. 我不知道你想达到什么目的，你能扩展你的问题吗？
3. 我想到的第一件事是尝试在hook:mouted 上调用method（它可以为所欲为）。然后在 watcher 中调用相同的方法，但使用 immediate: false（这是默认的 btw）