通过使用这个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>