I am currently delving into the world of Vuex, but I believe there are some fundamental concepts that I may be missing. Any suggestions or insights would be greatly appreciated.
Currently, I am dispatching the scale value of a zoomable map from one component to the Vuex store.
Within my Store.js file:
export default new Vuex.Store({
state: {
scale: ""
},
getters:{
getScale: state => {
return state.scale
}
},
mutations:{
setScale: (state, payload) => {
state.scale = payload
}
},
actions:{
updateScale: (context, payload) => {
context.commit("setScale", payload);
}
}
})
This part seems to be functioning as intended, as I can see the scale number changing in the mutation, state, and getters sections when zooming in/out on the map with my mouse. However, I have encountered difficulties when attempting to retrieve this data from the Vuex state within another component.
In my Map1.vue file:
mounted(){
var scale = this.$store.getters.getScale
}
Unfortunately, I am only receiving the value stored in the state property "scale" (in this case, an empty string). My intention is to access the dynamically updated data that was sent to the state. Retrieving static data worked perfectly fine (I tested it with a simple array).
I also tried retrieving the data using a computed property, but encountered a similar issue where only the initial scale value was being accessed within mounted:
computed: {
scaleValue(){
return this.$store.getters.getScale
}
}
mounted(){
var scale = this.scaleValue
}
I seem to be at an impasse. Based on my research, it appears that whenever I scroll the map using my mouse, the data is sent to the action for processing, then stored in the state via mutation. Shouldn't I be able to access this updated data (such as the scale) from any other Vue component within my application?
UPDATE: I have included the Map1.vue component below for reference
<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 JavaScript code
.
.
var scale = this.$store.getters.getScale
}
}
</script>