vue组件中使用vuex中state对象的几种方式

// 第一种方式
<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,
        // 是否正在加载疫情数据，各个模块需要根据该值来显示加载效果
        // 全国疫情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 store

vuex-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;
            } 
        }
}