vue组件中使用vuex中state对象的几种方式
// 第一种方式
{{$store.state.count}}
// 第二种方式
{{count}}
// 第三种方式
{{count}}
// 第四种方式
{{count}}
// 第五种方式
{{count}}
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,
// 是否正在加载疫情数据，各个模块需要根据该值来显示加载效果
// 全国疫情loading
chinaLoading: false,
// 省市疫情loading
provinceLoading: false,
// 社区疫情loading
communityLoading: false,
// 全国疫情数据
chinaEpidemicInfos: [],
// 省市疫情数据
provinceEpidemicInfos: [],
// 小区疫情数据
communityEpidemicInfos: [],
// 当前日期: 1581403079725
nowDate:''
},
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;
}
}
}