改变状态后由 Vue(x) 更改的数组答案

【问题标题】：Array changed by Vue(x) after mutating state改变状态后由 Vue(x) 更改的数组
【发布时间】：2020-01-13 16:36:15
【问题描述】：

我正在构建一个用于学习目的的 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”，即使在 DB 中它们是不同的。

有趣的是，当我在我的操作中注释掉提交行时：

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

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

谁能向我解释为什么会出现这种情况以及我该如何解决？

谢谢！

【问题讨论】：

你能分享你的代码吗？
请记住，console.log 打印活动对象。我猜您正在从代码的不同部分更改站点（这取决于您的突变设置的内容）尝试使用模拟数据直接调用 commit('SET_STATION', ) 而没有并查看会发生什么。Vue 开发工具扩展也应该有所帮助您可以查看存储中的数据何时更改。
我用完整的代码创建了一个 github 仓库：github.com/david-breidert/station-problem
在我看来一切都很好，这可能是后端的东西。

标签： javascript vue.js vuex

【解决方案1】：

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

【讨论】：