vuex state management library
What is vuex?
Vuex is an official plug-in, state management library, and centralized management of data shared by components in the project.
Remember, not all projects need Vuex. If the project is small, you don’t need vuex at all. If the project is large, with many components, a lot of data, and poor data maintenance, you can use vuex
npm i [email protected]Install vuex first
Under the src folder, create a new directory as store
Then expose this store object to the outside world, the corresponding method
To register this warehouse in main.js, you can use vuex
If the project is too large, there are too many components, and there are many interfaces, you can make vuex realize modular development
It is to turn a large warehouse into a small warehouse
Small repositories, merged into large repositories
Dynamic display of three-level linkage data
That is, this piece of data is hard-coded, and we really want to get the data to render it on the page
The component is mounted: you can initiate a request to the server
Notify Vuex to send a request, get the data, and store it in the warehouse
Then go to our warehouse and write code
It returns a Promise object, and then we deconstruct the commit. Here we must pay attention to the formal parameter is {commit}, otherwise the following error will be reported
This way you can get the data
and then injected into the page
Observe the structure, then render to the page
Get rid of the others, only the next one, and then v-for traverse the array
The three-level linkage data is displayed on the page. Finish
Complete the first level of classification and dynamically add background color
It is to make a mouse move one-level classification and display the corresponding color
First solution: complete with style
Of course it can be achieved
Second solution: done via js
First, we define a function, use @mouseenter to move the mouse to trigger the changeIndex method, and pass in the index value. Then you can use a responsive array to store
Then add the cur class to him through dynamic indexing, which can also be realized
Now we need the mouse to move the nav part and keep it from disappearing. Completion via event delegation
Just use a big box, and then remove the mouse and write it on the big div
Use Js to control the display and hiding of the second and third-level product categories
At the beginning, the second and third-level commodity categories were displayed and hidden through the css style display:block|none
