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

Question

我正在尝试学习 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 开发工具中，当我用鼠标缩放 in/out 时，我可以看到比例数字在突变、状态和吸气剂方面发生变化。（确实，突变是自动改变的，对于状态和吸气剂，我需要按加载状态。我猜这是这样工作的）

所以问题可能出在我尝试从 vuex 状态接收数据到其他组件的方式上。

我试过了：

Map1.vue

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

但我只是得到存储在状态属性 mjerilo 中的值（在本例中为空）。我需要发送给州的动态。对于静态数据，这非常有效（我尝试使用简单数组）。

我也尝试重试计算中的数据，但我有类似的问题。在这种情况下，在 mounted 中我只得到第一个比例值

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

我不确定哪里出了问题，但您可以试试这个，然后会发生什么？你如何调度你的动作？

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


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

Answer 2

我相信您正在寻找类似 watch

的函数

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

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

How to receive dynamic data from vuex state into component

javascript

vue.js

vuex