异步状态更改后的Vuex执行功能

Question

对于找到一个我认为对于 Vuex 之类的东西来说非常常见的用例的示例，我感到很沮丧。

我在 store 上调度异步操作以通过 api 填充它。填充此商店后，我需要执行某些操作。

我遇到的每个 Vuex 示例似乎都只是处理 UI 的直接更新。但几乎在所有情况下，我还需要执行基于关键组件的操作。

state: {
  // initial state values are all falsey
  id: false,
  name: false,
},
getters:   {
  getItem: (state) => {
    return state;
  },
},
actions: {
  setItem({commit}) {
    // async call to get and then commit the state
  }
}

上面是 item store 的相关 sn-p 一个非常简单的示例，其中调度操作的调用通常是从此处未详细说明的组件调用的。下面是我正在监视要填充的项目的组件。

watch:    {
  item: function (newItem) {
    this.doSomethingWith(newItem);  // this never runs
  }
},
computed: {
  ...mapGetters({
    item: 'getItem',
  }),
},
mounted() {
  console.log(this.item);  // I get an observer of the item object

  // none of items state properties are defined during mounted
},
methods: {
 doSomethingWith(item) {
   // I want to do something here with the set item!!
 }
}

我希望不会在挂载时设置项目状态，因为它是对外部 api 的异步调用。然而，我所期望的是，当它最终被填充时，观察者会捕捉到它并允许我在组件内运行后续操作。但是手表永远不会触发。

那么我如何跟踪组件中的此类更改并根据其新状态运行操作？

Answer 1

手表永远不会触发，因为代码正在监视从getItem 返回的对象，即state 对象和对state 对象的引用没有改变。只有状态对象的属性会改变。如果要触发手表，则需要执行deep 手表。

watch:    {
  item: {
    handler:function (newItem) {
      this.doSomethingWith(newItem);
    },
    deep:true
  }
},

根据您的应用程序，这可能不是很高效。您可能希望使用一个 getter 来监视状态的特定属性。

或者，从启动异步 API 调用并在成功处理程序中执行您需要的操作的操作返回一个承诺。