Я пытаюсь изучить vuex, но я думаю, что мне не хватает базового понимания. Любые советы, пожалуйста.
Из одного компонента я отправляю значение масштаба моей масштабируемой карты в хранилище vuex.
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);
}
}
})
Эта часть работает хорошо, потому что в инструменте vue dev я вижу, что число шкалы меняется в мутации, состоянии и геттерах, когда я увеличиваю/уменьшаю масштаб с помощью мыши. (Действительно, в мутации меняется автоматически, а для состояния и геттеров мне нужно нажать состояние загрузки. Я думаю, это работает так)
Так что проблема, вероятно, в том, как я пытаюсь получить данные из состояния vuex в какой-то другой компонент.
Я пытался:
Map1.vue
mounted(){
var scale = this.$store.getters.MJERILO
}
Но я просто получаю значение, хранящееся в свойстве состояния mjerilo (в данном случае пустое). И мне нужна динамика, которую я отправил в состояние. Для статических данных это работало отлично (я пробовал с простым массивом).
Я также пытался повторить данные в вычислении, но у меня аналогичная проблема. В этом случае в смонтированном я получаю только первое значение масштаба
computed: {
mjerilo(){
return this.$store.getters.MJERILO
}
}
mounted(){
var scale = this.mjerilo
}
Я совершенно потерян. Из чтений я понимаю, что когда я когда-либо прокручиваю свою карту с помощью мыши, я отправляю данные в действие для «регистрации», чем посредством мутации я сохраняю эти данные в состоянии. Из состояния я могу получить последние обновленные данные (в данном случае масштаб) в любом другом компоненте vue моего приложения?
ОБНОВЛЕНИЕ: я добавляю компонент Map1.vue
<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>
Вы пробовали использовать this.$store.state.scale
?
@KarloRodriguezDelaRosa да, все та же проблема
@anpel Я обновил свой вопрос, чтобы вы могли видеть компонент Map1
Я не уверен, что не так, но вы могли бы попробовать это, что тогда произойдет? Как вы отправляете свое действие?
<template>
<div>
{{ MJERILO }}
</div>
</template>
import { mapGetters, mapActions } from "vuex";
export default {
...mapGetters(["MJERILO"]),
}
Результат тот же, только первое значение шкалы. В компоненте SvgMap я определяю панорамирование с помощью d3.zoom()... поэтому внутри функции масштабирования я достигаю масштаба и отправляю его var scale = transform.k; this.$store.dispatch("МАСШТАБ МАГАЗИНА", масштаб)
Я полагаю, вы ищете такую функцию, как watch
data: {
scale: this.$state.scale
},
watch: {
'$store.state.scale': (newVal) => {
this.scale = newVal;
}
}
Вы правы, часами я успеваю перечислить все свои весы. Спасибо, что указали мне, чтобы узнать о часах. У меня есть один дополнительный вопрос. Из часов мне удалось поместить значения шкалы в свойство данных и сделать console.info в часах, но я не могу использовать эти данные в смонтированном?
Привет, вы можете прочитать Хук жизненного цикла VueJS, чтобы вы могли понять, как работает монтирование, а также другие
не могли бы вы помочь мне еще с одной вещью. В каждом объясненном примере я нашел синтаксис просмотра как watch: {someName: function(){....}}, а затем я могу использовать наблюдаемое someName elswhere.... но в вашем примере вы используете «$ store.state.scale» ? Я понимаю, что это такое, но я не понимаю, как использовать это в другом месте.
@Kaloy хороший босс kaloy, lakas!!! +1
Не могли бы вы опубликовать свой полный компонент карты?