时间戳

首页 > 解决方案 > 改变状态后由 Vue(x) 更改的数组

javascript - 改变状态后由 Vue(x) 更改的数组

问题描述

我正在构建一个用于学习目的的 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 时，我得到了这个
正如您所见，两个对象的 id 都是“2”，即使在 DB 中它们是不同的。

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

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

问题消失了， res.data 完全不同

谁能向我解释为什么会这样以及我该如何解决？

谢谢！

标签： javascriptvue.jsvuex

解决方案

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

推荐阅读