知识介绍
- 对json数据进行优化
- 使用vuex完成不同components之间的参数
代码分析
1. 对json数据进行优化
原数据:
"connections": [{"X_point": {"coords": [13327354.751253285,3229146.982745276],"name": "3,1,44"},"Y_transformed_point": {"coords": [13327356.448199026,3229121.5529443296],"text": "01NB01"},"matched": 0},{"X_point": {"coords": [13327354.529195061,3229140.083845076],"name": "3,1,43"},"Y_transformed_point": {"coords": [13327356.448199026,3229121.5529443296],"text": "01NB01"},"matched": 0}
]
优化(对于x和y,分别只保留name和text):
const optimizeConnections = (connections) => {return connections.map(connection => ({X_point: connection.X_point.name, // 直接取原来的 nameY_transformed_point: connection.Y_transformed_point.text, // 直接取原来的 textmatched: connection.matched // 保持 matched 不变}));
};
2. 使用vuex完成不同components之间的参数
- 首先在./store/index.js中定义state和mutations
import { createStore } from 'vuex'export default createStore({state:{selectedPoints:[] // 在matchTable中选中所选择的组串编号},getters:{},mutations:{setSelectedPoints(state, points) {state.selectedPoints = points;}},actions:{},modules:{}
})
- 在./components/matchTable.vue中,将选中的组串编号保存到store中
2.1 导入store:import store from '@/store';
2.2 在对要传递的参数进行处理的函数中,将选中的组串编号保存到store中(某一个coponent中)
const customRow = (record) => {return {onClick: () => {const index = selectedRowKey.value.indexOf(record.X_point);if (index >= 0) {// 如果行已被选中,则从数组中移除selectedRowKey.value.splice(index, 1);} else {// 如果行未被选中,则添加到数组中selectedRowKey.value.push(record.X_point);}// 更新Vuex状态store.commit('setSelectedPoints', selectedRowKey.value);},};};
- 在另一个component中,监听store中的状态,并获取到选中的组串编号
3.1 导入store:import store from '@/store';
3.2 监听store中的状态,并获取到选中的组串编号
watch(()=>store.state.selectedPoints.length, (newSelectedPoints) => {console.log('选中的X_point变化:', newSelectedPoints);}, {immediate: true });