1. What is Vuex? Why use it?
vuex official explanation
Vuex is a state management model + library specially developed for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.
You can think about it, what are the values transmitted between components? There is communication between father and son, communication between sibling components... but parameter passing is very cumbersome for multi-layer nesting, and code maintenance will also be very troublesome. Therefore, vuex extracts the shared state of components and manages them in a global singleton mode, and puts the shared data functions into vuex so that any component can use them.
2. When should we use it?
Vuex can help us manage shared state and comes with more concepts and frameworks. This requires weighing short- and long-term benefits.
If you don't plan to develop a large single-page application, using Vuex may be cumbersome and redundant. It's true - if your app is simple enough, you're probably better off not using Vuex. A simple store pattern is all you need. However, if you need to build a medium to large single-page application, you will most likely be thinking about how to better manage state outside of the component, and Vuex will be a natural choice.
3. Installation
Method 1:
Check the vuex option when creating a scaffolding project and the system will automatically create it
Method 2: npm or Yarn installation
npm install vuex@next --save
yarn add vuex@next --save
4. Configuration
If you use scaffolding to create it, no operation is required and you can ignore this step.
Create a new store file->index.js, configure it as follows, and introduce it in main.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//数据，相当于data
state: {
},
getters: {
},
//里面定义方法，操作state方发
mutations: {
},
// 操作异步操作mutation
actions: {
},
modules: {
},
})
main.js in
5. Core concepts
There are a total of five states in vuex: State Getter Mutation Action Module, which will be explained in detail below.
5.1 State
Provides a unique public data source, and all shared data is stored in the store's state, similar to data
Data is defined in the state in vuex and can be called in any component
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//数据，相当于data
state: {
name:"张三",
age:12,
count:0
},
})
transfer:
method one:
Use it directly in the tag
Method Two:
this.$store.state.全局数据名称
Method three:
Import mapstate function on demand from vuex
import { mapState } from "vuex";
Note: The global data required by the current component is mapped to the computed property of the current component
5.2 Mutation
The only way to change state in a Vuex store is to submit a mutation. Mutation in Vuex is very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make the state changes, and it accepts state as the first parameter:
Defined in vuex:
The parameter state parameter is required. You can also pass a parameter yourself. The following code performs addition and subtraction operations on the counter. During the addition operation, the addition can be performed according to the size of the passed parameters. The subtraction operation does not pass a parameter and subtracts one each time.
Use in components:
Define two buttons for addition and subtraction operations
method one:
Note: Use commit to trigger the Mutation operation
methods:{
//加法
btn(){
this.$store.commit("addcount",10) //每次加十
}
//减法
btn1(){
this.$store.commit("reduce")
}
}
Method Two:
Use auxiliary functions to operate, the specific method is the same as above
5.3 Action - perform asynchronous operations
Action is similar to Mutation. Mutation is generally not used for asynchronous operations. If you want to perform asynchronous operations, use Action.Reason: To facilitate devtools to take a snapshot and save it for management and maintenance. So this is just a specification, not a logical disallowance. It is just to allow this tool to track data changes.
Defined in vuex:
Change the above subtraction operation to an asynchronous operation
Used in components:
method one:
直接使用 dispatch触发Action函数
this.$store.dispatch("asynAdd")
Method Two:
Use helper functions
5.4 Getter
Similar to computed in Vue, it caches and processes the data in the Store to form new data.
The specific operations are similar to the previous ones and will not be explained in detail here.
5.5 Modules
When encountering large-scale projects, the amount of data is large, and the store will become very bloated.In order to solve the above problems, Vuex allows us to split the store into modules. Each module has its own state, mutation, action, getter, and even nested submodules - divided in the same way from top to bottom:
By default, actions and mutations inside modules are still registered in the global namespace - this allows multiple modules to respond to the same action or mutation.
If you want your module to have a higher degree of encapsulation and reusability, you can make it a namespace module by adding namespaced: true. When a module is registered, all its getters, actions, and mutations will automatically be named according to the module's registered path.