Доступ к стоимости магазина в Vue JS

Question

Я импортирую стоимость из магазина

import {store} from '../../store/store'

и у меня есть переменная: -

let Data = {
  textType: '',
  textData: null
};

Когда я использую console.log(store.state.testData)

Получение ниже результата в консоли: -

{__ob__: Observer}
counters:Array(4)
testCounters:Array(0)
__ob__:Observer {value: {…}, dep: Dep, vmCount: 0}
get counters:ƒ reactiveGetter()
set counters:ƒ reactiveSetter(newVal)
get usageUnitCounters:ƒ reactiveGetter()
set usageUnitCounters:ƒ reactiveSetter(newVal)
__proto__:Object

и когда я получаю прямой доступ console.log(store.state.testData.testCounters)

Получение ниже результата в консоли: -

[__ob__: Observer]
length:0
__ob__:Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__:Array

но если я получу доступ к console.log(store.state.testData.testCounters) с помощью setTimeout, я получу требуемое значение для testCounters.

setTimeout(() => {
  console.log(tore.state.testData.testCounters);    
}, 13000)

Но мне нужно присвоить testCounter значение переменной Data , но поскольку данные недоступны, они передают пустое значение, как определено. Как я могу ждать до testCounters Данные будут доступны или у нас есть какие-либо другие методы?

export { Data }

Answer 1

Если я правильно понимаю ваш вопрос, вы пытаетесь получить доступ к store.state.testData.testCounters, как только он будет установлен.

способ сделать это - использовать компьютер и часы

  computed: {
    testData() {
      return this.$store.state.testData;
    }
  },
  watch: {
    testData: {
      immediate: true,
      deep: false,
      handler(newValue, oldValue) {
        console.log(newValue);
      }
    }
  },

часы сработают один раз после установки (потому что immediate имеет значение true, но вы можете установить его на false), они сработают снова при изменении значения.

Что касается примечания, вы можете использовать оператор распространения для отображения значений объекта без таких наблюдаемых значений:

console.log({...store.state.testData})