Notes on pit mining

1. Axios gets data asynchronously

The getData method was originally intended to run in the onBeforeMount life cycle and the draw method in the onMounted life cycle. Get (‘ draw ‘, ‘axios.get’, ‘draw’, ‘axios.get’);

2. Data access problems of Reactive

const data: any = reactive({ nodes: [].edges: []}); data.nodes = [...res.data.nodes]; data.edges = [...res.data.edges];Copy the code

If res.data.nodes has a package [] inside it, use the extension operator…

3. Graphics rendering problem after data replacement of G6

The instantiated object generated by G6 needs to be set as a global object

let graph:any = reactive(Object)

 graph = new G6.Graph({ 
 ...
 })
Copy the code

As long as the instantiated objects are not the same, subsequent renderings will present two shapes, causing a new image to be drawn again instead of updating the data.

4. Add the code related to the node

function add(this: any) {
      let newNode = reactive({
        id: num.value.toString(),
        label: (num.value+1).toString(),
      });
      let newEdges = reactive({
        source: (num.value-1).toString(), 
        target: num.value.toString(), 
        label: "Test"
      });
      data.nodes.push(newNode);
      data.edges.push(newEdges);
      console.log(data, "Update data");
      num.value = num.value + 1;
	// Render again
      graph.render();
     
    }
Copy the code