VueJS - 저장된 데이터의 반응성 제한

VueJS - 저장된 데이터의 반응성 제한

목표:API 호출을 통해 얻은 개체의 배열을 작성하려고 합니다.API에 호출을 하면 단일 객체를 반환하고, 그 결과를 저장하는 옵션을 구축한 다음 새로운 호출을 수행하고 싶습니다.

문제:API를 새로 호출할 때마다 저장한 원래 개체가 업데이트됩니다.

Vuex를 사용하거나 사용하지 않고 이 작업을 수행하려고 시도했지만 어느 쪽이든 동일한 문제가 있습니다.어레이의 모든 항목은 API에서 반환되는 새로운 정보에 반응하게 됩니다.여기에는 여러 가지 다양한 구성 요소가 있습니다. 여기서는 문제에 대해 중요하다고 생각하는 부분을 공유하겠습니다.

스토어:

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>

저는 기본적으로 "액티브 플레이어"가 "플레이어" 또는 "플레이어 통계"의 활성 정보에 대한 변경에 반응하지 않고 멍청한 배열이기를 원합니다.이것을 해결하는 가장 좋은 방법은 무엇입니까?

사용해 보십시오.Object.assign(targetObj,srcObj)원래 개체나 배열이 변경되지 않도록 하려면 다음 명령을 사용합니다.

this.targetArr=originArr.slice();

Object.assign어레이도 개체이므로 어레이에서도 작동합니다.

언급URL : https://stackoverflow.com/questions/54294157/vuejs-limiting-reactivity-of-data-in-store