How to receive dynamic data from vuex state into component

0
votes

I'm trying to learn vuex but I think I am missing some basic understanding. Any advice please.

From one component I am dispatching the scale value of my zoomable map to vuex store.

Store.js

export default new Vuex.Store({

    state: {
        scale:""
      },

    getters:{
       MJERILO: state => {
          return state.scale
        }
      },

     mutations:{
        STORESCALE: (state, payload) => {
          state.scale = payload  
        }
      },

      actions:{  
        RECEIVECURRENTSCALE: (context, payload) => {
          context.commit("STORESCALE", payload);
        }
      }    
})

This part is working well because in vue dev tool I can see that the scale number is changing in mutation, state and getters when I do zoom in/out with my mouse. (Do, in mutation is changing automaticaly, and for state and getters I need to press load state. I guess this work like this)

So the problem is probably in the way how I am trying to receive data from vuex state into some other component.

I tried:

Map1.vue

mounted(){
   var scale = this.$store.getters.MJERILO
}

But I just get the value stored in state property mjerilo (in this case empty). And I need dynamic that I sent to state. For static data this worked perfectly (I tried with simple array).

I also tried to retry data in computed, but I have a similar problem. In this case in mounted I get just the first scale value

computed: {
  mjerilo(){
     return this.$store.getters.MJERILO
    }
}

mounted(){
  var scale = this.mjerilo
}

I am quite lost. From readings I understand that when ever I scroll my map with mouse I am sending data to action for "registration", than through mutation I am storing this data in state. From state I can get the last updated data (in this case scale) in any other vue component of my app?

UPDATE: I am adding Map1.vue component

<template>
  <svg-map name="Zupanije" ></svg-map>  
</template>
<script>
import * as d3 from 'd3'
import SvgMap from "./SvgMap"
export default {
    name: "Map1",

    components: {
        "svg-map":SvgMap
    },
    mounted(){
        ......lots of javascrip code
        .
        .
        var scale = this.$store.getters.MJERILO
    }
}
</script>
2
javascriptvue.jsvuex
Can you please post your complete map component? – anpel
Have you tried using this.$store.state.scale? – Kaloy
@KarloRodriguezDelaRosa yes, I did, still the same problem – Hyacinth
@anpel I updated of my question, so you can see Map1 component – Hyacinth

2 Answers

0
votes

I believe you are looking for a function like watch

data: {
    scale: this.$state.scale
},
watch: {
    '$store.state.scale': (newVal) => {
        this.scale = newVal;
    }
}
0
votes

I'm not sure what's wrong but you could try this, what happens then? How you dispatch your action?

<template>
    <div>
        {{ MJERILO }}
    </div>
</template>


import { mapGetters, mapActions } from "vuex";
export default {
    ...mapGetters(["MJERILO"]),
}