1. What is vuex
Vuex is the state manager (state management tool) of the vue project. The state of the vue project is reflected by variables bound to the vue instance (component). So it can also be said that vuex is used to manage various variables in vue projects (components in vue projects can access variables managed in vuex - facilitating component communication)
2. How vuex works
(1) Define a state globally: state is essentially an object, and its properties are variables used by vue components (all components share these variables)
(2) If you want to update the value of state in the vue component, you must do it through mutation (the state can only be changed through mutation), and you can only modify it synchronously (that is, the methods in mutation are synchronous)
(3) If you want to modify the value of state asynchronously, you need to do it through action (action cannot directly modify state, but it can initiate a request to mutation, mutation can modify the value of state, and you can define an asynchronous method in action)
3. Use scenarios of vuex
(1) Not suitable: Small and simple applications
(2) Suitable for: medium and large single page applications
Multiple views (multiple components) depend on the same state
Different views need to change the same state
4. Workflow
View-->Action-->Mutations-->State-->View
V. The core API of vuex
（1）state：
Must be unique
Essentially an object, maintaining the state of vue
const state = {
Attribute name: Initialization value
}
state:{
Attribute name: Initialization value
}
（2）mutations
Function: Used to modify state
Define multiple methods for modifying state
Only sync codes are included
Definition method:
const mutations = {
Method name 1(state,[data]){
//Change the property value of state
},
Method name 2(state,[data]){
//Change the property value of state
},
}
Trigger method:
(1) In actions, triggering is achieved by commit('mutations' method name')
(2) In the component, trigger it through this.$('method name', params)
(3) actions: trigger the method in mutations through actions to realize asynchronous modification of state
- Can contain asynchronous code
- Indirectly modify state by triggering mutations by commit
- Triggering method (how to trigger actions): trigger in the component via this.$('action name', data1)
- How to define
const actions = {
Method name({commit,state},data1){
commit('Method name in mutations')
}
}
(4) getters: used to obtain the property value of state, similar to the calculated property of state
Definition method:
const getters = {
Method name ([parameter]){
return state.Property name
}
}
How to use it in a component: this.$. method name
(5) modules: state used to manage multiple submodules in large projects
VI. Application
Note the version: vue2 corresponding to vuex3, vue3 corresponding to vuex4
(1) Install vuex
npm install vuex@3 | npm i vuex@3 -S
(2) Define the vuex store (repository)
src/store/
Import vue and vuex
import Vue from 'vue'
import Vuex from 'vuex'
// Global registration vuex(Vuex)
//Define the global store: that is, define the global state manager (data warehouse)export default new ({
state:{ },
mutations:{},
actions:{},
getters:{},
modules:{}
})Configure in a file
import Vue from 'vue'
import App from './'
// Import vuex configuration fileimport store from "@/store/store";
// Reference in vue instancenew Vue({
store,
render: function (h) { return h(App) },
}).$mount('#app')Note:
Trigger method defined in mutations in component: Trigger synchronization method
this.$('Method name defined in mutations', parameter)
Triggering methods defined in actions in component: Triggering asynchronous methods
This.$('The method name defined in actions')
Methods to get attribute values in state:
1. Get directly: this.$. attribute name
2. Through getters: this.$. attribute name
This cannot be used when defining a store instance of vuex
VII. VUEX workflow
(1) Submit a request to modify state to mutations through commit in the component, or send a request to actions through dispatch
(2) Mutations modify the state of the state through the received request
This is the end of this article about the analysis of the working principle of Vue state management tool Vuex. For more related Vue Vuex content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!