Доступ к Store Value в Vue JS
Я импортирую стоимость из магазина
import {store} from '../../store/store'
и у меня есть переменная: -
let Data = {
textType: '',
textData: null
};
Когда я использую console.info(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.info(store.state.testData.testCounters)
Получение результата ниже в консоли: -
[__ob__: Observer]
length:0
__ob__:Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__:Array
но если я получаю доступ к console.info(store.state.testData.testCounters) с помощью setTimeout, я получаю необходимое значение для testCounters.
setTimeout(() => {
console.info(tore.state.testData.testCounters);
}, 13000)
Но мне нужно присвоить значение testCounter переменной Данные, но поскольку данные недоступны, оно передает пустое значение, как определено. Как мне подождать, пока появятся данные testCounters, или у нас есть другие методы?
export { Data }
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Если я правильно понял ваш вопрос, вы пытаетесь получить доступ к store.state.testData.testCounters после его установки.
способ, которым вы могли бы это сделать, - использовать вычисляемый и часовой
computed: {
testData() {
return this.$store.state.testData;
}
},
watch: {
testData: {
immediate: true,
deep: false,
handler(newValue, oldValue) {
console.info(newValue);
}
}
},
часы сработают один раз после установки (поскольку для immediate установлено значение true, но вы можете установить его на false), они сработают снова при изменении значения.
Кстати, вы можете использовать оператор распространения для отображения значений объекта без наблюдаемых, например:
console.info({...store.state.testData})
Поскольку он возвращает наблюдаемое, вы должны подписаться на магазин.
store.subscribe(res => {
console.info(res) //all state values are available in payload
})
Это сработало для меня
computed: {
audioPlayerStatus() {
return this.$store.getters.loadedAudioPlayer;
}
},
watch: {
'$store.state.loadedAudioPlayer.isTrackPlaying': function() {
...
}
},
Спасибо, Даниэль! но мне нужно использовать это в файле JS, а не в компоненте Vue.