在 Vue JS 中访问存储值答案

【问题标题】：Access Store Value in Vue JS在 Vue JS 中访问存储值
【发布时间】：2018-12-13 00:05:29
【问题描述】：

我正在从商店导入价值

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

但如果我使用 setTimeout 访问 console.log(store.state.testData.testCounters)，那么我将获得 testCounters 所需的值。

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

但我需要将 testCounter 值分配给 Data 变量，但由于数据不可用，它会按照定义传递空白值。我如何才能等到 testCounters 数据可用或我们有其他方法吗？

export { Data }

【问题讨论】：

标签： javascript arrays vue.js vuex

【解决方案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})

【讨论】：

谢谢丹尼尔！但我需要在 JS 文件中而不是在 Vue 组件中使用它。

【解决方案2】：

当它返回 observable 时，你应该订阅 store。

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

【讨论】：

【解决方案3】：

这对我有用

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

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

【讨论】：