Question

出于学习目的，我正在构建Vue应用程序，目前我坚持使用来自API的数据更新状态下的数组。这是我的API：

{
  "stations": [
    {
      "id": 1,
      "name": "Station 1",
    },
    {
      "id": 2,
      "name": "Station 2",
    }
  ]
}

这是我的Vuex存储中的操作（ApiService只是返回axios响应）：

actions: {
  fetchStations({ commit }) {
    let promise = ApiService.getStations()
    promise.then(res => {
      console.log(res.data)
      commit('SET_STATIONS', res.data)
    })
  },

这是突变：

mutations: {
  SET_STATIONS(state, stations) {
    state.stations = stations
  },

当我在devtools中检查记录的res.data时，我得到this
如您所见，即使在数据库中，两个对象的ID均为“ 2”。

有趣的是，当我在动作中注释掉提交行时，像这样：

actions: {
  fetchStations({ commit }) {
    let promise = ApiService.getStations()
    promise.then(res => {
      console.log(res.data)
      // commit('SET_STATIONS', res.data)
    })
},

问题消失了，res.data完全different

任何人都可以向我解释为什么会这样以及如何解决吗？

谢谢！

Answer 1

因为stations数据正在某处使用。我认为您使用的是类似v-for"item in stations" :key="item.id"的东西。 commit('SET_STATIONS', res.data)更改为stations。并且它有重复的id。

变更状态后，阵列由Vue（x）更改

1 个答案: