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

Question

我为找到一个示例而感到沮丧，因为我认为这对于像 Vuex 这样的东西来说是一个非常常见的用例。

我在商店上调度一个异步操作以通过 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
  }
}

以上是项目商店的相关片段，这是一个非常简单的示例，其中调度操作的调用通常是从此处未详述的组件调用的。下面是我正在监视要填充的项目的组件。

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 编辑的对象 return，它是 state 对象和对 state 对象的引用没有改变。只有状态对象的属性会改变。如果要开表，需要执行deep表。

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

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

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

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

Vuex Executing Function After Async State Change

javascript

asynchronous

vue.js

vuejs2

vuex