почему значение импортированной константы изменяется (Vue)

Question 1

Я импортирую массив под названием CHART_CARDS в компонент Vue. Это предназначено для предоставления начального состояния для другого массива, называемого chartCards, которое пользователь может изменить.

import { CHART_CARDS } from '~/constants/chartCards'

...

export default {
  data(){
    return {
      chartCards: []
    }
  },
  async created(){
    if (this.$auth.user.settings && this.$auth.user.settings.length) {
      this.chartCards = this.$auth.user.settings
    } else {
      this.chartCards = CHART_CARDS
    }
  }
}

Таким образом, свойство данных chartCards берется либо из импортированной переменной, либо из уже существующей таблицы базы данных.

Вот где все становится странно: у меня есть метод под названием reset, который должен восстановить переменную chartCards до значения импортированного массива:

     async reset () {
         console.log('going to reset.  CHART_CARDS looks like:')
         console.log(CHART_CARDS)
         this.chartCards = CHART_CARDS
         await this.updateCards()
         console.log('chart cards after updating:')
         console.log(this.chartCards)
     }

Каким-то образом CHART_CARDS также изменяется при обновлении chartCards. В двух журналах консоли выше печатается один и тот же массив, поэтому сброс не работает. CHART_CARDS больше нигде в коде не изменяется; все ссылки на CHART_CARDS показаны в приведенном выше коде. Как обновляется его стоимость?

javascript vue.js

0

David J. 5 Окт 2020 в 16:21

Answer

Как уже упоминалось в комментариях, ваш массив CHART_CARDS, вероятно, содержит объекты, и вы, скорее всего, изменяете эти объекты где-то в своем коде.

Есть простой способ обойти это с помощью некоторых незначительных настроек API.

~ / constants / chartCards.js

export function getChartCards () {
  return [
    {...},
    {...},
    ...
  ]
}

< Сильный > App.vue

import { getChartCards } from '~/constants/chartCards'

...

export default {
  data(){
    return {
      chartCards: []
    }
  },
  async created(){
    if (this.$auth.user.settings && this.$auth.user.settings.length) {
      this.chartCards = this.$auth.user.settings
    } else {
      this.chartCards = getChartCards()
    }
  }
}

Поскольку мы всегда создаем новый массив с разными объектами, изменения, внесенные в один экземпляр chartCards, не отразятся в другом.

Если вы абсолютно хотите придерживаться вашего текущего API, то этого тоже можно достичь. Вам просто нужно создать глубокую копию вашего объекта CHART_CARDS перед его назначением.

import { CHART_CARDS } from '~/constants/chartCards'

...

export default {
  data(){
    return {
      chartCards: []
    }
  },
  async created(){
    if (this.$auth.user.settings && this.$auth.user.settings.length) {
      this.chartCards = this.$auth.user.settings
    } else {
      this.chartCards = JSON.parse(JSON.stringify(CHART_CARDS)) // This will not work if your CHART_CARDS has methods
    }
  }
}

1

Guru Prasad 5 Окт 2020 в 13:58

Question 2

Как уже упоминалось в комментариях, ваш массив CHART_CARDS, вероятно, содержит объекты, и вы, скорее всего, изменяете эти объекты где-то в своем коде.

Есть простой способ обойти это с помощью некоторых незначительных настроек API.

~ / constants / chartCards.js

export function getChartCards () {
  return [
    {...},
    {...},
    ...
  ]
}

< Сильный > App.vue

import { getChartCards } from '~/constants/chartCards'

...

export default {
  data(){
    return {
      chartCards: []
    }
  },
  async created(){
    if (this.$auth.user.settings && this.$auth.user.settings.length) {
      this.chartCards = this.$auth.user.settings
    } else {
      this.chartCards = getChartCards()
    }
  }
}

Поскольку мы всегда создаем новый массив с разными объектами, изменения, внесенные в один экземпляр chartCards, не отразятся в другом.

Если вы абсолютно хотите придерживаться вашего текущего API, то этого тоже можно достичь. Вам просто нужно создать глубокую копию вашего объекта CHART_CARDS перед его назначением.

import { CHART_CARDS } from '~/constants/chartCards'

...

export default {
  data(){
    return {
      chartCards: []
    }
  },
  async created(){
    if (this.$auth.user.settings && this.$auth.user.settings.length) {
      this.chartCards = this.$auth.user.settings
    } else {
      this.chartCards = JSON.parse(JSON.stringify(CHART_CARDS)) // This will not work if your CHART_CARDS has methods
    }
  }
}

1

Guru Prasad 5 Окт 2020 в 13:58

почему значение импортированной константы изменяется (Vue)

1 ответ

Похожие вопросы

Новые вопросы

javascript