Since TypeNav is a global component, move the "TypeNav" folder in "src/pages/Home" into the "src/components" folder
Modify the path of TypeNav in main.js
Delete the test request part of the code
When the component is mounted, you can send a request to the server, then get the data, and display the data. In "src/componetns/TypeNav/index.vue", add the following code:
Among them, categoryList is an action
Find and edit the action in the data warehouse "src/store/home/index.js", the code is as follows.
Among them, the imported interface name is defined in "src/api/index.js":
You can see that the printed response data is as follows:
When the request is successful, continue to submit the response data (result.data) to mutations:
Modify the data in the data warehouse to the data returned by the server:
At this point, you can see that there is already data returned by the server in the warehouse:
Next, you need to get the data in the warehouse in the component for display. Open "src/components/TypeNav/index.vue" and add the following code:
At this point, you can see the response data appearing on the page:
Next, you need to display the data in the corresponding position, delete the following area codes:
Change to the following code:
