Vue-每日小知识（9/21）

知识介绍

1. 对json数据进行优化
2. 使用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,  // 直接取原来的 name
        Y_transformed_point: connection.Y_transformed_point.text,  // 直接取原来的 text
        matched: connection.matched  // 保持 matched 不变
    }));
};  

2. 使用vuex完成不同components之间的参数

1. 首先在./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:{
        
    }
})

2. 在./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);
            },
        };
        };

3. 在另一个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 });