// 第一种方式
<template><div class="test">{
{$store.state.count}} <!--第一种方式--></div>
</template><script type="text/ecmascript-6">export default{name:'test',data(){return{ }}}
</script>// 第二种方式
<template><div class="test">{
{count}} <!--步骤二--></div>
</template><script type="text/ecmascript-6">export default{name:'test',data(){return{}},computed:{count(){return this.$store.state.count; //步骤一}}}
</script>// 第三种方式
<template><div class="test">{
{count}} <!--步骤三--></div>
</template><script type="text/ecmascript-6">import {mapState} from 'vuex' //步骤一export default{name:'test',data(){return{}},computed:mapState({ //步骤二,对象方式count:state => state.count})}
</script>// 第四种方式
<template><div class="test">{
{count}} <!--步骤三--></div>
</template><script type="text/ecmascript-6">import {mapState} from 'vuex' //步骤一export default{name:'test',data(){return{}},computed:mapState([ //步骤二,数组方式"count"])}
</script>// 第五种方式
<template><div class="test">{
{count}} <!--步骤三--></div>
</template><script type="text/ecmascript-6">import {mapState} from 'vuex' //步骤一export default{name:'test',data(){return{}},computed:{...mapState([ //步骤二，对象扩展运算符方式"count"])}}
</script>vuex-store-index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from '../plugins/logger'
import { dateFormat } from '../util/util'import map from './modules/map'
import china from './modules/china'
import province from './modules/province'
import timeline from './modules/timeline'import api from '../api'Vue.use(Vuex)const debug = process.env.NODE_ENV !== 'production'const store = new Vuex.Store({strict: debug,plugins: debug ? [createLogger()] : [],modules: {map,china,province,timeline},state: {// 设备device:'pc',// 是否全屏的状态fullscreen: false,// 是否正在加载疫情数据，各个模块需要根据该值来显示加载效果// 全国疫情loadingchinaLoading: false,// 省市疫情loadingprovinceLoading: false,// 社区疫情loadingcommunityLoading: false,// 全国疫情数据chinaEpidemicInfos: [],// 省市疫情数据provinceEpidemicInfos: [],// 小区疫情数据communityEpidemicInfos: [],// 当前日期: 1581403079725nowDate:''},mutations: {updateChinaEpidemicInfos (state, epidemicInfos) {state.chinaEpidemicInfos = epidemicInfos;},updateProvinceEpidemicInfos (state, epidemicInfos) {state.provinceEpidemicInfos = epidemicInfos;},updateCommunityEpidemicInfos (state, epidemicInfos) {state.communityEpidemicInfos = epidemicInfos;},updateNowDate (state, date) {state.nowDate = date;},updateDevice (state, device) {state.device = device;},toggleFullscreen (state) {state.fullscreen = !state.fullscreen;}},actions: {getChinaEpidemicInfos ({ commit }, { date }) {date = dateFormat(date, 'yyyy-MM-dd');api.epidemic.getChinaEpidemicInfos({date}, data => {commit('updateChinaEpidemicInfos', data);if(data.length > 0){commit('updateNowDate', data[0].updateTime);api.epidemic.getProvinceEpidemicInfos({date}, data => {commit('updateProvinceEpidemicInfos', data);});}});},getProvinceEpidemicInfos ({ commit }, { date }) {commit('updateNowDate', date);date = dateFormat(date, 'yyyy-MM-dd');api.epidemic.getProvinceEpidemicInfos({date}, data => {commit('updateProvinceEpidemicInfos', data);});},getCommunityEpidemicInfos ({ commit }) {api.epidemic.getCommunityEpidemicInfos(data => {commit('updateCommunityEpidemicInfos', data);});}},
})export default storevuex-store-module-map.js
import { deepCopy } from '../../util/util.js'
const state = {// 当前状态（省、、市）curReginal:'province',// 累计、新增数据存储dataType:"total",// 图例显隐legendDisplay:"true"
}const getters = {/*** 省级累计数据、新增数据* @param {*} state * @param {*} getters * @param {*} rootState */provinceEpidemicDatas (state, getters, rootState) {console.log(state,getters);const { provinceEpidemicInfos } = rootState;const provinceDatas = provinceEpidemicInfos.map((provinceData,index) => {let {name, gb, confirmToday, confirmTotal} = provinceData;if(gb == null){gb = "156" + index.toString();confirmToday="0";confirmTotal="0";}const GB = gb.substring(3,gb.length);return {name, GB, confirmToday, confirmTotal};});return provinceDatas;},/*** 市级分级设色图累计数据、新增数据* @param {*} state * @param {*} getters * @param {*} rootState */cityEpidemicDatas (state, getters, rootState) {console.log(state,getters);const { provinceEpidemicInfos } = rootState;let cityGradeDatas = [];let cityEpidemicInfos = deepCopy(provinceEpidemicInfos);cityEpidemicInfos.forEach(info => {const gb = info.gb;if(gb == "156110000" || gb == "156120000" || gb == "156310000" || gb == "156500000" || gb == "156810000" || gb == "156820000" || gb == "156710000"){let {name, gb, confirmToday, confirmTotal} = info;info.children.push({name, gb, confirmToday, confirmTotal});}})const provinceDatas = cityEpidemicInfos.map((provinceData,index) => {const datas = provinceData.children;return datas.map((data,idx) => {let {name, gb, confirmToday, confirmTotal} = data;if(gb == null){gb = "156" + index.toString() + idx.toString();confirmToday=0;confirmTotal=0;}const GB = gb.substring(3,gb.length);return {name, GB, confirmToday, confirmTotal};});// }});provinceDatas.forEach(data => {cityGradeDatas = [...cityGradeDatas,...data];});return cityGradeDatas;},/*** 市级热力图累计数据、新增数据* @param {*} state * @param {*} getters * @param {*} rootState */cityEpidemicHeatDatas (state, getters, rootState) {console.log(state,getters);const { provinceEpidemicInfos } = rootState;let cityHeatTotalDatas = {"type": "FeatureCollection","properties": [],"features": []};let cityHeatTodayDatas = {"type": "FeatureCollection","properties": [],"features": []};provinceEpidemicInfos.forEach(provinceData => {const datas = provinceData.children;datas.forEach((data,index) => {// if(provinceData.name == "西藏"){// console.log("data",data.name,data.confirmTotal);// }let {lng, lat, confirmToday, confirmTotal} = data;if(confirmTotal == null){confirmTotal = 0;}if(confirmToday == null){confirmToday = 0;}if(provinceData.gb == "156420000"){if(confirmTotal > 5000){// confirmTotal = confirmTotal/15;}// if(confirmToday > 100){// confirmToday = confirmToday/300;// }}const totalData = {"type": "Feature","properties": {"value": parseInt(confirmTotal)},"geometry": {"type": "Point","coordinates": [lng, lat, parseInt(confirmTotal)]},'id':index};const todayData = {"type": "Feature","properties": {"value": parseInt(confirmToday)},"geometry": {"type": "Point","coordinates": [lng, lat, parseInt(confirmToday)]},"id":index};cityHeatTotalDatas.features.push(totalData);cityHeatTodayDatas.features.push(todayData);});});return {cityHeatTotalDatas,cityHeatTodayDatas};},/*** 全国小区疫情数据* @param {*} state * @param {*} getters * @param {*} rootState */communityEpidemicDatas (state, getters, rootState) {console.log(state,getters);const { communityEpidemicInfos } = rootState;let communityDatas = {"type": "FeatureCollection","properties": [],"features": []};communityEpidemicInfos.forEach(communityEpidemicInfo => {const {lng, lat, name} = communityEpidemicInfo;const communityData = {"type": "Feature","properties": {"name": name},"geometry": {"type": "Point","coordinates": [lng, lat]}};communityDatas.features.push(communityData);});return communityDatas;},
}const actions = {}const mutations = {/*** 省市切换* @param {*} state * @param {*} value */changeRegional (state, value) {state.curReginal = value;},/*** 累计、新增切换* @param {*} state * @param {*} value */changeDataType (state, value) {state.dataType = value;},/*** 图例显隐*/changeLegendDisplay (state, value) {state.legendDisplay = value;}
}export default {namespaced: true,state,getters,actions,mutations
}组件中使用module-map.js中的state数据
import { mapState, createNamespacedHelpers } from "vuex";
const { mapGetters } = createNamespacedHelpers('map');computed:{...mapGetters(['provinceEpidemicDatas','cityEpidemicDatas','cityEpidemicHeatDatas','communityEpidemicDatas']),...mapState(['device','fullscreen','provinceEpidemicInfos','communityEpidemicInfos']),curReginal () {return this.$store.state.map.curReginal;},caseType () {return this.$store.state.map.dataType;}},
methods:{/*** 添加病例图层*/changeLayer(id){this.curLayerId = id;switch(id) {case 'totalGradeMap':this.$store.commit("map/changeDataType","total");// 添加累计数据分级设色图this.addGradeLayer(id);break;case 'totalHeatMap':this.$store.commit("map/changeDataType","total");// 添加累计数据热力图this.addHeatLayer(id);break;case 'todayGradeMap':this.$store.commit("map/changeDataType","today");// 添加新增数据分级设色图this.addGradeLayer(id);break;case 'todayHeatMap':this.$store.commit("map/changeDataType","today");// 添加新增数据热力图this.addHeatLayer(id);break;case 'stageScatterMap':// 添加病例活动场所散点图this.addStageScatteLayer(id);break;case 'stageHeatMap':// 添加病例活动场所热力图this.addStageHeatLayer(id);break;default:break;} }
}