Access Store Value in Vue JS

Question

I am importing value from store

import {store} from '../../store/store'

and I have Variable:-

let Data = {
  textType: '',
  textData: null
};

When i use console.log(store.state.testData)

Getting Below result in console:-

{__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

and when i directly access console.log(store.state.testData.testCounters)

Getting Below result in console:-

[__ob__: Observer]
length:0
__ob__:Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__:Array

but if i access console.log(store.state.testData.testCounters) with setTimeout then i get required value for testCounters.

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

But i need to assign testCounter value to Data variable but as data is not available it pass blank value as defined. How can i wait untill testCounters Data will be available or do we have any other methods?

export { Data }

Daniel · Accepted Answer · 2018-07-04 14:51:47Z

10

If I understand your question correctly, you're trying to access store.state.testData.testCounters once it's set.

the way you could do that is to use a computed and a watch

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

the watch will trigger once after mounted (because immediate is set to true, but you can set it to false) it will trigger again when the value changes.

On a side note, you can use the spread operator to display the object values without the observables like this:

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

answered Jul 4, 2018 at 14:51

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ritwik Kumar Over a year ago

Thanks Daniel! but I need to use this in JS file not in Vue component.

Hasanul Rubel · Accepted Answer · 2020-04-25 20:32:11Z

1

As it returns observable you should subscribe the store.

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

answered Apr 25, 2020 at 20:32

Hasanul Rubel

112 bronze badges

Comments

atazmin · Accepted Answer · 2021-03-03 07:04:07Z

0

This worked for me

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

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

answered Mar 3, 2021 at 7:04

atazmin

5,8651 gold badge41 silver badges31 bronze badges

Collectives™ on Stack Overflow

Access Store Value in Vue JS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related