Как получить динамические данные из состояния vuex в компонент

Я пытаюсь изучить 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>

Не могли бы вы опубликовать свой полный компонент карты?

anpel 18.12.2020 15:37

Вы пробовали использовать this.$store.state.scale?

Karlo 18.12.2020 16:26

@KarloRodriguezDelaRosa да, все та же проблема

Hyacinth 18.12.2020 20:47

@anpel Я обновил свой вопрос, чтобы вы могли видеть компонент Map1

Hyacinth 18.12.2020 21:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
1 385
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я не уверен, что не так, но вы могли бы попробовать это, что тогда произойдет? Как вы отправляете свое действие?

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


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

Результат тот же, только первое значение шкалы. В компоненте SvgMap я определяю панорамирование с помощью d3.zoom()... поэтому внутри функции масштабирования я достигаю масштаба и отправляю его var scale = transform.k; this.$store.dispatch("МАСШТАБ МАГАЗИНА", масштаб)

Hyacinth 18.12.2020 21:28
Ответ принят как подходящий

Я полагаю, вы ищете такую ​​​​функцию, как watch

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

Вы правы, часами я успеваю перечислить все свои весы. Спасибо, что указали мне, чтобы узнать о часах. У меня есть один дополнительный вопрос. Из часов мне удалось поместить значения шкалы в свойство данных и сделать console.info в часах, но я не могу использовать эти данные в смонтированном?

Hyacinth 23.12.2020 09:31

Привет, вы можете прочитать Хук жизненного цикла VueJS, чтобы вы могли понять, как работает монтирование, а также другие

Karlo 23.12.2020 14:14

не могли бы вы помочь мне еще с одной вещью. В каждом объясненном примере я нашел синтаксис просмотра как watch: {someName: function(){....}}, а затем я могу использовать наблюдаемое someName elswhere.... но в вашем примере вы используете «$ store.state.scale» ? Я понимаю, что это такое, но я не понимаю, как использовать это в другом месте.

Hyacinth 08.01.2021 11:30

@Kaloy хороший босс kaloy, lakas!!! +1

Joel Enanod Jr 11.01.2022 02:36

Другие вопросы по теме