First, install vuex
After installation file found more store.js
store.js equivalent to the warehouse, all data will write in the state in
Second, installed after the re-run
Third, add functionality student show page
1) introducing the two components Student.vue
2) Adding these two components in the component
3) The written contents inside two components
4) Use the assembly student.vue
Show results:
Fourth, the acquisition of the data store
Available through the $ store
Data pool:
studentList中：
When the button to add a click event to change the name, we found that adding the names of students has not changed
The reason is that the name data is fixed, $ store.state.name change the name data is not changed, the calculation time can be computed properties, updating data
Data can be changed
Fifth, if the increase in the data store
Use this method to change the data, but the data if the data in the pool is large, this method is inconvenient
Therefore, a method is provided vuex can get a lot of data in the store -> mapState (directly returns an object, where the object is a function of a)
Is the object, the object is in a function of a, much like with computed
mapState can be placed directly computed in
But if they have a name attribute of the data in the above will render their own, in order to avoid conflicts, mapStata the name may change name
Rendering above to change the name:
Sixth, add a list of functions to achieve
1) First, to know what data is input in the input, so the two-way data binding
2) Set the data name and age
3) Click the button when you need to know what is the value of the input box
4) changes in the data store
5) the 3) the value of the name and age into a value object, then the object into an array of
6) a list of rendering for loop, a key value required for loop, here a timestamp value when a key
7) changes in the value list
8) Change studentList components
