Install vuex in the vue-cli2 project and use NPM to install vuex-save.
After the installation is successful, create a new store file in the src directory and create a js file in it.
Write in js file:
Then import the store into the main.js file and register it in the instance of vue.
The file configuration of vuex is completed here.
Now go back to the parameters in the storage file. These objects are the five cores of vuex:
Status: globally accessible object.
Getter: Like computed of vue, it is used to monitor the change of state value (latest state) in real time.
Catastrophe: method of storing changed state values (synchronization)
Action: Trigger method in mutation (asynchronous)
Module: module
State is a data object stored in Vuex, just like data in an instance of Vue. Only the state can be accessed globally.
Define stata object, and directly define key:val in state, and you can define any data type.
Use this. $store.state gets the value of state in the page.
Here, the state is usually installed on the calculated calculation attribute, so that when the value of the state changes, it can respond in time.
Of course, you can also listen to it with a watch.
Auxiliary function mapState in state
When a component needs to obtain multiple states, it will be somewhat repetitive and redundant to declare all these states as computational attributes. To solve this problem, we can use the mapState auxiliary function to help us generate calculation attributes.
output
Vuex allows us to define getter in storage (which can be thought of as computational properties of storage). Just like calculating the property computed, the return value of getter is cached according to its dependency, and will be recalculated only when its dependency value (property in state) changes.
The function of Getter is to monitor the change of state value in real time.
Define the Geters object
Use state as its first parameter.
You can use other getter functions as the second parameter.
Use getters in the page and use this. $store.getters
Auxiliary function mapGetters in getters
The mapGetters helper function simply maps the getter in the storage to local calculation properties:
output
The only way to change the status in Vuex's store is to submit the mutation.
Use state as the first parameter.
Use this. $store.commit ('method name') triggers a method in a mutation.
output
The official interpretation of the second parameter is called the submitted payload.
You can pass an extra parameter, the mutated payload, to store.commit.
Simply put, you can pass additional parameters in the second parameter.
Take the name as an example here.
output
In Vuex, mutation must be a synchronous function.
An action can contain any asynchronous operation, and its function is to trigger mutation asynchronously.
Define an operation object
Receive context parameters and parameters to be changed.
Context has the same methods and properties as the store instance, so it can execute context.commit (""), or use context.state and context.getters to get status and getters.
Use this. $store.dispatch ("method name") method to perform the operation.
output
Similarly, Action supports the load method, passing in the second parameter.
output
The function of the module is to divide the store into modules, and each module has its own state, variation, action, getter and even nested submodules-the division method from top to bottom is the same:
It mainly solves the problem that all the states of an application will be concentrated in a relatively large object due to the use of a single state tree. When the application becomes very complex, the store object may become very bloated.
Simply put, vuex can be modularized.