当vuex状态发生变化时，如何重新呈现vue组件？
当vuex状态发生变化时，如何重新呈现vue组件？
提问于 2021-08-30 07:42:10
我想要创建一个组件，像一个控制层，以改变传单的基本地图。但我不想使用L.control.layers。因此，我制作了一个侧边栏组件，它具有更改basemap的选项。
我使用vuejs并组织使用vuex的数据。这是我的密码
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import "leaflet/dist/leaflet.css";
Vue.use(Vuex)
export default new Vuex.Store({
state: {
satellite: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
dark: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
osm: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
topography: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
baseMap: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
},
getters: {
baseMap: state => state.baseMap
},
actions: {
changeBaseMap({ commit }, base) {
commit("CHANGE_BASE_MAP", base);
}
},
mutations: {
CHANGE_BASE_MAP(state, base) {
state.baseMap = base
}
},
})用来更改baseMap值的侧栏组件是工作的。但是，当baseMap状态发生变化时，传单组件并没有改变，它只是改变了baseMap的值，而不是传单组件。
这是我的Map组件，当computed更改时，我使用state访问state值
<template>
<div id="container" >
<div id="map"></div>
</div>
</template>
<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
export default {
name: "Map",
data() {
return {
center: [-0.789275,113.921327],
zoom: 5,
map: null
};
},
computed: {
baseMap: function () {
return this.$store.getters.baseMap
}
},
methods: {
setupLeafletMap () {
this.map = L.map("map").setView(this.center, this.zoom);
var tilelayer = L.tileLayer(this.baseMap)
tilelayer.addTo(this.map)
}
},
mounted() {
this.setupLeafletMap();
}
};
</script>我尝试在baseMap标记中调用<div>值，当状态发生变化时，它会发生变化。但是小叶基片层没有变化
<div id="map">{{ baseMap }}</div>我一直在寻找解决办法，但我还是很困惑。我不知道还能做什么。
Stack Overflow用户
回答已采纳
发布于 2021-08-30 08:25:59
你应该
watch: {
baseMap () {
this.setupLeafletMap()
}
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68980487
复制相关文章
相似问题
腾讯云开发者
