Javascript Vuex在异步状态更改后执行函数

我对找到一个我认为对Vuex这样的东西来说是非常常见的用例的例子感到沮丧

我在存储上调度一个异步操作，通过api填充它。一旦这个存储区被填充，我需要执行某些操作

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
  }
}

我遇到的每一个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
  }
}

上面是itemstore的相关片段，这是一个非常简单的示例，其中分派操作的调用通常是从此处未详细介绍的组件调用的。下面是我正在监视填充项的组件

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!!
 }
}

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

---

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

监视从不触发，因为代码正在监视从

getItem

返回的对象，该对象是

状态

对象，对

状态

对象的引用不会更改。只有状态对象的属性更改。如果要启动手表，需要执行

deep

watch

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

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

---

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

您已将

item

映射到

getItem

getter，但您的示例有一个

getUnit

getter。这是一个输入错误-我正在从现有应用程序复制代码，并试图使其更通用。我已经更新了问题。啊，谢谢！阅读deep选项上的文档，对于我可能更习惯于观看的数组，这似乎不是必需的，因此会产生混乱。从操作返回承诺的问题是，我经常在完全不同的组件中调用该操作（例如，父组件和上面的示例组件将是需要响应的遥远的子组件）。我当然可以使用全局事件总线触发事件，但我觉得这样做有违使用Vuex的目的。