如何从vuex状态接收动态数据到组件中

Question

我正在尝试学习 vuex，但我认为我缺少一些基本的理解。请任何建议。

我从一个组件将可缩放地图的比例值发送到 vuex 存储。

商店.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 开发工具中，当我用鼠标放大/缩小时，我可以看到比例数字在突变、状态和吸气剂中发生变化。（做，突变会自动改变，对于状态和吸气剂，我需要按加载状态。我想这个工作是这样的）

所以问题可能在于我如何尝试将数据从 vuex 状态接收到其他组件中。

我试过：

地图1.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>

Answer 1

我相信您正在寻找类似的功能watchdata: {&nbsp; &nbsp; scale: this.$state.scale},watch: {&nbsp; &nbsp; '$store.state.scale': (newVal) => {&nbsp; &nbsp; &nbsp; &nbsp; this.scale = newVal;&nbsp; &nbsp; }}

Answer 2

我不确定出了什么问题，但你可以尝试一下，然后会发生什么？你如何调度你的行动？<template>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {{ MJERILO }}&nbsp; &nbsp; </div></template>import { mapGetters, mapActions } from "vuex";export default {&nbsp; &nbsp; ...mapGetters(["MJERILO"]),}