1. What is VueX
Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. Vuex is also integrated into Vue’s official debugging tool, DevTools Extension, which provides advanced debugging functions such as zero-configuration time-travel debugging, status snapshot import and export, and so on. You can simply think of it as storing all the variables that need to be shared by multiple components in one object.
1.1 Status management of single Pages
1.2 Multi-interface Status Management
Vue has helped us to manage the state of single interface, but if multiple interfaces depend on one state at the same time (if the state of one interface changes, multiple interfaces also need to be updated in time).
At this point we need Vuex to help us manage this state. What we need to do is extract the shared state and give it to our VueX for unified management.
2. Basic use of VueX
1. Create a store file in the SRC directory and create index.js in the file
3. VueX core concept -State
Vuex proposes the use of State single State tree, also known as single State source. A single state tree allows us to find a fragment of a state in the most direct way, and it is also very convenient to manage and maintain in the later maintenance and debugging process.
4. VueX core concept -Getter
Sometimes we need to derive some state from the state in the store, such as filtering and counting lists.
Vuex allows us to define “getters” (you can think of them as computed properties of the store) in the store. Just like evaluating properties, the return value of a getter is cached based on its dependency and is recalculated only if its dependency value changes.
case
VueX defines the page index.js
5. VueX core concept — Mutations
The only way to change the state in Vuex’s store is to commit mutation.
Mutation has a string event type (type) and a callback function (handler). This callback is where we actually make the state change, and it accepts state as the first argument.
5.1 Submitting a Payload
When updating data via mutation, it is possible that we want to carry some additional parameters. The parameter is called the Payload of mutation.
5.2 Responsive rules
The state in Vuex’s store is responsive, and the Vue component updates automatically when the data in the state changes.
This requires us to follow some Vuex rules:
Initialize the required properties in store ahead of time.
When adding new attributes to objects in state, use the following method:
Vue. Set (obj, ‘newProp’, 123)
Method 2: reassign V to the old object with the new object
The vue. set method adds a new object and vue. delect deletes it.
Picture from Xiao Ma Ge Education:
5.3 Constant replaces Mutation event types
As our project grew, more and more states were managed by Vuex, and more and more states needed to be updated, which meant more and more methods in Mutation. There are too many methods, and users need to spend a lot of time remembering them, even switching between files, looking up method names, and even making mistakes if they are not copied.
A common scenario in various Flux implementations is to replace the type of Mutation events with constants.
5.4 Mutation must be a synchronization function
An important rule to keep in mind is that mutation must be a synchronous function and actions should handle asynchronous functions.
The main reason is that devTools can help us capture mutation snapshots when we use devTools.
However, if the operation is asynchronous, DevTools will not do a good job of tracking when the operation is completed.
6. VueX core concept -Action
Action is similar to mutation, except that:
- The Action commits mutation rather than a direct state change.
- Actions can contain any asynchronous operation.
6.1 Basic Use of Actions
6.2 Parameter transfer of Actions
Actions parameter passing is the same as Mutaion.
VueX configuration page
To solve these problems, Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, getter, and even nested submodules — split the same way from top to bottom
7. VueX core Concept -Module
Because of the use of a single state tree, all the states of an application are grouped into one large object. When the application becomes very complex, the Store object can become quite bloated.
To solve these problems, Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, getter, and even nested submodules — split the same way from top to bottom:
const moduleA = {
state: () = >({... }),mutations: {... },actions: {... },getters: {... }}const moduleB = {
state: () = >({... }),mutations: {... },actions: {... }}const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA status
store.state.b // -> moduleB status
Copy the code
For detailed documentation, please refer to the official website
