Vue JS의 저장소 값 액세스

Vue JS의 저장소 값 액세스

스토어에서 값을 가져오는 중입니다.

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 값을 할당해야 하는데 데이터를 사용할 수 없기 때문에 정의된 대로 빈 값을 전달합니다.testCounters Data를 사용할 수 있을 때까지 어떻게 기다리거나 다른 방법이 있습니까?

export { Data }

제가 당신의 질문을 정확히 이해했다면, 당신은 당신의 질문에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})

관찰 가능한 상태로 반환되므로 스토어를 구독해야 합니다.

 store.subscribe(res => {
        console.log(res) //all state values are available in payload
    })

이건 내게 효과가 있었다.

computed: {
    audioPlayerStatus() {
      return this.$store.getters.loadedAudioPlayer;
    }
  },

  watch: {
    '$store.state.loadedAudioPlayer.isTrackPlaying': function() {
      ...
    }
  },

언급URL : https://stackoverflow.com/questions/51175514/access-store-value-in-vue-js