VueJS - ограничение реактивности данных в хранилище

Question

Цель: попытаться построить массив объектов, полученных с помощью вызова API.Когда я делаю вызов API, он возвращает один объект, я хотел бы создать опцию для сохранения этого результата, а затем выполнить новый вызов.

Проблема: каждый раз, когда я делаю новый вызов API, обновляется исходный объект, который я хранил.

Я пытался выполнить это как с Vuex, так и без него, но у меня та же проблема в любом случае.Каждый элемент в моем массиве реагирует на новую информацию, возвращаемую API.У меня здесь есть несколько различных компонентов, и я поделюсь тем, что я считаю критическим для этой проблемы.

Store:

export default new Vuex.Store({
  state: {
    activePlayers: []
  },
  mutations: {
    addPlayer (state, newPlayer) {
        state.activePlayers.push(newPlayer)
    }
  },
  actions: {

  }
})

Базовое приложение

<template>
    <div id="app">
        <FetchPlayer 
            v-on:doFetchPlayer="doFetchPlayer">
        </FetchPlayer>
        <ShowPlayer
            :player="player"
            :seasons="seasons">
        </ShowPlayer>
        <Compare></Compare>
    </div>
</template>

<script>
import FetchPlayer from './components/FetchPlayer.vue'
import ShowPlayer from './components/ShowPlayer.vue'
import Compare from './components/Compare.vue'

export default {
    name: 'app',
    data: function() {
        return {
            player: {}
        }
    },
    components: {
        FetchPlayer,
        ShowPlayer,
        Compare
    },
    methods: {
        doFetchPlayer: function (playerAttr) {
            var url = this.$apiURL
            this.$http
                .get(url, {headers: this.$apiHeaders})
                .then(response => (this.player = response))
                .then(this.doFetchSeasons(playerAttr.platform))
        }
    }
}
</script>

Модуль действий

<template>
    <div class="homeModule" v-if="playerStats.playerName">
        <div class="lifetimeStats">
            <!-- Data Display -->
        </div>
        <div class="actionPanel">
            <button @click="addPlayer()">+ Compare</button>
        </div>
    </div>
</template>

<script>

export default {
    name: 'ShowPlayer',
    props: {
        player: {
            type: Object,
            required: true
        }
    },
    data: function() {
        return {
            profile: {},
            playerStats: {
                id: null,
                playerName: null,
                title: null,
                data: {}
            }
        }
    }
    watch: {
        player: function() {
            this.getProfile()
        }
    },
    methods: {
        getProfile: function() {
            var playerID = this.player.data.data[0].id
            var url = this.$apiURL
            this.$http
                .get(url, {headers: this.$apiHeaders})
                .then(response => (this.profile = response))
                .then(this.getPlayerStats)
        },
        getPlayerStats: function() {
            var gameMode = this.teamMode
            if (this.isFpp) {
                gameMode = gameMode + '-fpp'
            }
            this.playerStats.id = this.profile.data.data.relationships.player.data.id + this.selectedSeason
            this.playerStats.playerName = this.player.data.data[0].attributes.name
            this.playerStats.title = this.playerStatsTitle
            this.playerStats.data = this.profile.data.data.attributes.gameModeStats[gameMode]
        },
        addPlayer () {
            this.$store.commit('addPlayer', this.playerStats)
        }
    }
}
</script>

Я хочу, чтобы "activePlayers" был тупым массивом, не реагирует на изменения, внесенные в активную информацию в "player" или "playerStats".Каков наилучший способ сделать это?

Answer 1

Попробуйте использовать Object.assign(targetObj,srcObj), чтобы избежать изменения исходного объекта или массива, а если вы назначаете массив другому, используйте следующую инструкцию:

this.targetArr=originArr.slice();

Object.assign работает также с массивами, посколькуэто тоже объекты.