1. What is Vuex?
Vuex is a state management pattern developed specifically for vue.js applications.
When we build a medium-to-large single-page application, Vuex can better help us manage state uniformly outside the component.
2. Five core concepts of Vuex
State
Getters
Mutations
Actions
Modules
Among them, State and Mutations are the core concepts that will be touched in any project. Why are these two the most core?
First, first of all, State is our only data source , which means that we need to extract some states from the component and put them into State. State is our only carrier. We must define our State. This is the most important thing. important.
Second, how to change the value in State? **For example, how to modify the quantity of products in the shopping cart. If we add +1 to the product list and delete it from the shopping cart list, it will be -1. So where to operate this State is through Mutations. Mutations are the only ones that can commit and change state.
Therefore, these two states are what we must master.
Getters, Actions, Modules, if our project is not too complex, then only using State and Mutations can meet business needs.
Next, let’s take a look at these states separately.
1. State (equivalent to data)
1. What is State? I have also mentioned that the variables in the data in each of our components are called State. State is also the core concept of our entire Vue. This is to tell our developers that Vue is A progressive framework, we use state to manage and operate our DOM and change our UI, instead of using the past method of directly operating the DOM. So State is a core concept in our VUEX, and it is also a core concept in VUEX.
State is the only data source, that is, it is the only carrier. We need to put any variable that needs to be extracted into our State for management, then we can get it on any page. .
A single state tree, what is a single state tree, also means that by defining a store instance, then there is only one State in this store instance, a single state tree, it is not like our Vue component, which can have another one nested inside it. Component, N components can be nested inside another component, so that it has a very hierarchical relationship;
But our VUEX is actually very simple. It is just a tree. As long as this tree and store object are registered in our main.js, as long as they are registered by our vue, all hierarchical components in vue can be used. It is a relatively simple state tree.
Let's look at the following component. This is a timer component. It includes a template. We can see that the attribute count is used in the template. We can see that there is a computed attribute in it. This computed attribute is also That is to say, when the variables inside us change, it will be calculated from time to time, and finally render our view.
We can see that a function like count is defined in it. All functions in computed must be functions. In the calculated attributes, each field corresponds to a function. The count in our template corresponds to the count method in computed; when in the template When the count changes, the count in computed will be calculated from time to time, and after the calculation is completed, it will be rendered to the corresponding position of the template.
// 创建一个 Counter 组件
const Counter = {
template: `<div>{
{ count }}</div>`,
computed: {
// 计算属性
count () {
return this.$store.state.count // this就是当前vue的实例，组件的实例；
//.$store表示vuex注册到vue里面，那么全局任何一个组件都可以拿到这个vuex;
//this.$store就是vuex的对象;
//只要通过import导入vuex;
// 然后通过vue.use我们的vuex，
// 我们就是可以通过this.store拿到我们的vuex的对象
// .state就是我们vuex里面定义的属性，它唯一的数据源
// 我们任何的状态都必须定义到我们的stort里面去
// count就是我们状态下挂的一个属性
// 我们就是使用这种方式去使用vuex里面的状态
}
}
}
State is the only data source, which means the only carrier. Just import vuex through import; then through vue.use our vuex, we can get our vuex object through this.store, and .state is in our vuex The defined attributes are its only data source. Any of our states must be defined in our stort. Count is an attribute attached to our state. This is how we use the state in vuex.
2. Getter (equivalent to computed)
Some new states can be derived through Getters; let's look at the following example:
We create a new instance of vuex. This way is to define the instance of vuex.
const store = new Vuex.Store({
// 我们这样创建了一个vuex的对象,这个对象里面包括state，我们可以把任何的状态抽取出来都放到state里面去，
// state是我们唯一的数据源,我们可以看到里面定义的数组,叫todos，加入这个todos是每个页面都要用到的数组
// 接下来还定义了getters,getters和state是平级的关系;
// 比如说现在又五个页面都使用到了这个数组,但是恰巧有一个页面它并不像完全应用这个数组,
// 它只想用done是true的数组列表;
// 我们可以通过getters对数组进行操作;
// 我们直接 return state.todos.filter(todo => todo.done);通过它的filter过滤器返回todo.done为true的数据
// getters是state的延伸，可以通过getters派生出一些新的状态
// getters是基于todos来操作的
state: {
todos: [
{
id: 1, text: '...', done: true },
{
id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
Let's take another example. For example, when the number of shopping carts is greater than 99, we need to change it to "99+"; at this time, it is definitely not enough for you to just define a state; we need to re-extend a getters to do something like this an operation;
3. Mutations (equivalent to methods)
The only way to change the state in the Vuex store is to submit a mutation.
Let's look at the following example
const store = new Vuex.Store({
state: {
// 我们在Store里面定义一个state这么一个属性
count: 1 // 它里面有个count这样的字段，值是1
},
mutations: {
// 那么我们如何将count改成其他值呢,我们没有其他方法，必须通过mutations这个值
// 怎么提交,比方说，我们定义一个mutations这么一个属性，它里面一个increment的函数,这个函数可以随便起
// increment函数首先默认接收了一个状态；第一个参数就是state；这个state就是上面的state
// 它可以通过state。count去拿到我们的状态值;来去给它++；来改变它的状态
// 注意：只能在mutations里面去定义函数去提交改变state里面的值
// 这种方式有什么好处，它就相当于我们管理我们的日志;管理我们的记录,在哪里怎么提交的，每一步都可以把它加到我们记录里面去；方便vuex的调试
increment (state) {
// 变更状态
state.count++
}
}
})
Next let’s take a look at how to call this function
Only the function is defined in mutations, and the value is added by 1 inside the function; but there needs to be some place to trigger it.
//通过方法触发
store.commit('increment') //去提交这个函数，这样我们的值才能去加1；
For example, on our shopping cart list page, after we add the shopping cart, we only need to adjust store.commit to submit the increment; then our increment
The number of shopping carts will be ++; the number of shopping carts on each page will be ++; this is the function of our mutations;
4.Actions (asynchronous loading of methods)
Action submits a mutation rather than directly changing the state.
That is to say, our state value needs to be submitted through mutation; then mutation can be submitted through Action;
Action can contain random asynchronous operations
Let's take a look at the following example:
const store = new Vuex.Store({
// 我们new了一个vuex的实例
state: {
// 我们定义了一个状态
count: 0
},
mutations: {
// mutations是唯一用来提交count值的
increment (state) {
state.count++
}
},
actions: {
// actions也定义了increment;它默认接收一个context；context它可以直接去调用commit方法
// 这都是vuex全局注册进来的
// 通过context这个对象可以调用我们的commit来提交一个increment；这句话执行之后就会去调用mutation里面的increment方法,就会把count的值++；
//
increment (context) {
context.commit('increment')
}
}
})
So the first is to directly call the store.commit('increment') method in methods; the second is to define an action and submit the increment through this action;
It seems a bit redundant, and it is indeed a bit redundant; but there is one scenario where it is not redundant; that is, the mutation function must be synchronous; and Action can do any asynchronous operation;
5.Modules
In the face of complex applications, when there are many states to be managed, we need to divide the vuex store object into modules.
Let's look at an example below:
const moduleA = {
// 通过const来定义一个moduleA,再定义一个moduleB；每个模块都包括
// stste,mutation,action,getters等一系列概念;
// 只是说这些状态都是在A模块里面运用的；B模块里面也会应用到；但是如果我们的项目并不需要太多的状态管理；那么我们完全可以把它定义到vuex里面去；不需要进行拆分；
// 只有在我们的页面里面概念比较多，而又不想和别的页面进行混淆的时候；
// 大家可以把它拆分成每个模块
state: {
... },
mutations: {
... },
actions: {
... },
getters: {
... }
}
const moduleB = {
state: {
... },
mutations: {
... },
actions: {
... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
Let's take a look at the state management diagram of Vuex; we still need to explain it to you; after the explanation, you may understand this concept a little clearer;
enter