使用Vue.observable()进行状态管理

通过使用这个Observable api 可以应对一些简单的跨组件数据状态共享的情况。

1.首先创建一个 store.js，包含一个 state和一个 action，分别用来指向数据和监控数据更新。 

export let state = Vue.observable({
    chosenType: 'OD',
    // 行政区-出行量-地图展示选择
    districtCheckList: ["名称展示", "标签展示", "颜色展示"],
    // 查询参数
    queryValues: {
        // 默认全选
        vehicleCategory: ['2', '512', '0', '32', '4', '64', '256', '1', '16'],
        regionDimension: 'district',
        dateProperty: '不限',
        timeProperty: '不限',
        dateRange: {
            from: '20210831',
            to: '20210909'
        }
    },
    // 区域维度切换
    regionDimension: 'district',
    // 热点区域-行政区/街道切换
    hotspotCheckList: '行政区',
    ConvertQueryParams: (queryValues, poiType)=>{
        // 获取开始日期
        let startDate = queryValues.dateRange.from;
        // 获取结尾日期
        let endDate = queryValues.dateRange.to;
        // 车辆类型
        let vehicleType = queryValues.vehicleCategory.join(',');
        //   日期特征转换
        let dateProperty
        if (queryValues.dateProperty === '不限') {
            dateProperty = 2
        } else if (queryValues.dateProperty === '工作日') {
            dateProperty = 1
        } else {
            dateProperty = 0
        };

        const areaTypeValues = {
            'district': 'district',
            'subdistrict': 'block',
            'hotspot': 'poi'
        }
        // 区域维度转换
        let areaType = areaTypeValues[queryValues.regionDimension]
        let params = {
                "startDate": Number(startDate),
                "endDate": Number(endDate),
                "vehicleType": vehicleType,
                "timeProperty": timeProperty,
                "dateProperty": dateProperty,
                "areaType": areaType 
        }
        if (poiType) {
            params.poiType = poiType
        } 
        return params
    }
})
// 将 JavaScript 对象转换为 JSON 字符串
const keepState = JSON.stringify(state);

const mutation = {
    // 改变右下角图层选择值
    updateDistrictCheckList(value) {
        state.districtCheckList = value;
        console.log('updateDistrictCheckList', value);
    },
    // 改变查询数据
    updateQueryValues(value) {
        // 对象的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
        state.queryValues = {...value}
        console.log('updateQueryValues', value);
    },
    // 改变区域维度需切换显示组件，单独拿出来控制
    updateRegionDimension(value) {
        state.regionDimension = value;
        console.log('updateRegionDimension', value);
    },
    // 热点区域-可拖拽框选项（左下角区域切换）
    updateHotspotCheckList(value) {
        state.hotspotCheckList = value;
        console.log('updateHotspotCheckList', value);
    },
    // 出行量/出发量/到达量切换
    updateChosenType(value) {
        state.chosenType = value;
    }
}

export const action = {
    resetState() {
        state = Vue.observable(JSON.parse(keepState))
    },
    updateDistrictCheckList: mutation.updateDistrictCheckList,
    updateQueryValues: mutation.updateQueryValues,
    updateRegionDimension: mutation.updateRegionDimension,
    updateHotspotCheckList: mutation.updateHotspotCheckList,
    updateChosenType: mutation.updateChosenType
}

2.然后在组件index.vue中引用，在组件里使用数据和方法。

<script>
import {state, action} from './store';
import District from "./bottom-panel/district";

export default {
    computed: {
        // 查询参数 store.js里面的默认数据
        queryValues: ()=>{return state.queryValues},
        // 获取起止日期，选中车辆类型，及给日期特征替换成对应数字
        ConvertQueryParams: ()=>{return state.ConvertQueryParams}
    }
}
</script>

3.再定义一个子页面./bottom-panel/district/index.vue

<script>
import {state, action} from '../../store';

export default {
    computed: {
        //右下角图层
        districtCheckList() {
            return state.districtCheckList
        },
        // 查询参数 store.js里面的默认数据
        queryValues: ()=>{return state.queryValues},
        // 获取起止日期，选中车辆类型，及给日期特征替换成对应数字
        ConvertQueryParams: ()=>{return state.ConvertQueryParams}
    },
    watch: {
        chosenType(value) {
            action.updateChosenType(value);
        }
    }
}
</script>