如何处理Vuex存储以从Rest API获取数据？

Question

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

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

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

现在我有这个：

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

但是我不认为将传入数据分配给local属性是处理存储数据的正确方法。

有办法更好地解决这个问题吗？也许使用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')
  }
}