javascript - 在 Vue JS 中访问存储值

Question

我正在从商店导入值(value)

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。

你可以做到这一点的方法是使用计算和 watch

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

watch 安装后会触发一次(因为immediate设置为true，但您可以将其设置为false)它会触发当值改变时再次。

顺便说一句，您可以使用展开运算符来显示没有可观察量的对象值，如下所示:

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