Question

我正在使用Vuex来处理我的应用程序状态。

我需要向rest api发出一个Ajax Get请求，然后显示一些对象列表。

我正在调度从服务器加载此数据的操作，但后来我不知道如何在组件上处理它。

现在我有了这个：

//component.js
created(){
      this.$store.dispatch("fetch").then(() => {
        this.objs = this.$store.state.objs;
      })
    }

但我不认为将传入数据分配给本地属性是处理商店数据的正确方法。

有没有办法更好地处理这个问题？也许使用mapState？

谢谢！

Answer 1

有很多方法可以做到，你必须自己试验并找到适合你方法的方法。这就是我的建议

{ // the store
  state: {
    something: ''
  },
  mutations: {
    setSomething (state, something) {
      // example of modifying before storing
      state.something = String(something)
    }
  },
    actions: {
      fetchSomething (store) {
        return fetch('/api/something')
          .then(data => {
            store.commit('setSomething', data.something)
            return store.state.something
          })
      })
    }
  }
}

{ // your component
  created () {
  this.$store
    .dispatch('fetchSomething')
    .then(something => {
      this.something = something
     })
    .catch(error => {
       // you got an error!
     })
  }
}

为了更好的解释：https://vuex.vuejs.org/en/actions.html

现在，如果你正在处理动作本身的错误，你可以简单地调用动作并使用引用商店中的值的计算属性

{
  computed: {
    something () { // gets updated automatically
      return this.$store.state.something
    }
  },
  created () {
    this.$store.dispatch('loadSomething')
  }
}

如何处理vuex存储以从rest api获取数据？

1 个答案: