javascript - 在 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）当值改变时会再次触发。

附带说明一下，您可以使用扩展运算符来显示对象值，而无需像这样的 observables：

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

Answer 2

当它返回 observable 时，您应该订阅商店。

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

Answer 3

这对我有用

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

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