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

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

那么如何在组件中跟踪这样的更改并根据新状态运行操作？

Answer 1

手表永远不会触发，因为代码正在观察从getItem返回的对象，state对象，而state对象的引用不会改变。只有状态对象的属性发生变化。如果您要发射手表，则需要执行deep手表。

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

根据您的应用程序，这可能不是非常高效。您可能想要使用一个监视该州特定属性的getter。

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

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

1 个答案: