We want to achieve is simply to click on the +1 count plus one, click on the time count-1 -1
A, mutation
In vue, only the mutation can change state. Mutation similar events, each mutation has a type and a handler, because only mutation can change the state, so the handler will automatically obtain a default parameter state. In fact, that is the name of so-called type , action to commit a mutation, it is to commit to specify which mutation, so the mutation need at least a name, and then commit mutation, to do something, it would need to specify a handler type (name) + handler constitutes the mutation. test.js now add mutation.
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
// 加1
increment(state) {
state.count++;
},
// 减1
decrement(state) {
state.count--
}
}
})
Vue suggested that we represent the type of mutation, changed a bit, the mutation type to constant capital in capital
mutations: {
// 加1
INCREMENT(state) {
state.count++;
},
// 减1
DECREMENT(state) {
state.count--
}
}
Two, action
action to commit mutations, so even define the action. test.js which added actions.
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
// 加1
INCREMENT(state) {
state.count++;
},
// 减1
DECREMENT(state) {
state.count--
}
},
actions: {
increment(context) {
context.commit("INCREMENT");
},
decrement(context) {
context.commit("DECREMENT");
}
}
})
action and define methods mutions are similar, we have to dispatch a action, so actions must have a name, and then dispatch it to do what action is to commit mutation, so even give it a function. Due to the commit mutation, so the function will automatically have a default parameter properties and methods context, which is an example of a store, the store can get through its examples, as will context.state acquired state property, context.commit will execute commit command.
In fact, what actions can also be abbreviated, because the function is an object, the object function is used in a way we can get directly to the assignment by the method of deconstruction of the object. Modify actions
actions: {
increment({commit}){
commit("INCREMENT")
},
decrement({commit}){
commit("DECREMENT")
}
}
三、dispatch action
Now the rest of the dispatch action. When dispatch action it? Only when we click on the button of the time. Button to add a click event handler of the click event dispatch action.
This time we need to create a new operating components, for the time being we named test.vue
<template>
<div>
<div>
<button @click="add">+1</button>
<button @click="decrement">-1</button>
</div>
</div>
</template>
Then, we get the two operating methods in which event
<script>
export default {
methods: {
increment(){
this.$store.dispatch("increment");
},
decrement() {
this.$store.dispatch("decrement")
}
}
}
</script>
Of course, on top of such an approach is too much trouble, vuex back to me we provide mapActions this function, it mapState is the same, our action is directly mapped to the inside of the action in store.
<script>
export default {
methods: {
...mapActions(['increment', 'decrement'])
}
}
</script>
<Script>
Import mapActions {} from 'vuex'
Export default {
Methods: {
// This is written in while feasible, but more cumbersome
// vue time function provides mapAction,
// mapState and it is the same as our action map directly to the inside of the store in the action.
INCREMENT // () {
// the this. Store.dispatch $ ( 'INCREMENT')
//},
// Decrement () {
// the this. Store.dispatch $ ( 'Decrement')
//}
// Here we use a more concise wording
// ... mapActions ([ 'INCREMENT', 'Decrement'])
/ **
If the event handler name and the name of the action is different to mapActions
provide an object, the object's properties are event handlers name, attribute value is action corresponding dispatch name.
* /
// here is to change the name of the actual event
... mapActions ([ '
... mapActions ({
add: 'increment'
})
}
}
</script>
This time we click the button, you can see the count changes.
Finally, attach a simple pattern analysis, it should look a little more intuitive
We want to achieve is simply to click on the +1 count plus one, click on the time count-1 -1
A, mutation
In vue, only the mutation can change state. Mutation similar events, each mutation has a type and a handler, because only mutation can change the state, so the handler will automatically obtain a default parameter state. In fact, that is the name of so-called type , action to commit a mutation, it is to commit to specify which mutation, so the mutation need at least a name, and then commit mutation, to do something, it would need to specify a handler type (name) + handler constitutes the mutation. test.js now add mutation.
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
// 加1
increment(state) {
state.count++;
},
// 减1
decrement(state) {
state.count--
}
}
})
Vue 建议我们mutation 类型用大写常量表示，修改一下，把mutation 类型改为大写
mutations: {
// 加1
INCREMENT(state) {
state.count++;
},
// 减1
DECREMENT(state) {
state.count--
}
}
二、action
action去commit mutations, 所以还要定义action. test.js 里面添加actions.
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
// 加1
INCREMENT(state) {
state.count++;
},
// 减1
DECREMENT(state) {
state.count--
}
},
actions: {
increment(context) {
context.commit("INCREMENT");
},
decrement(context) {
context.commit("DECREMENT");
}
}
})
action 和mutions 的定义方法是类似的，我们要dispatch 一个action, 所以actions 肯定有一个名字，dispatch action 之后它要做事情，就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context, 它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性， context.commit 就会执行commit命令。
其实actions 还可以简写一下， 因为函数的参数是一个对象，函数中用的是对象中一个方法，我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions
actions: {
increment({commit}){
commit("INCREMENT")
},
decrement({commit}){
commit("DECREMENT")
}
}
三、dispatch action
现在就剩下dispatch action 了。什么时候dispatch action 呢？ 只有当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.
这个时候我们需要新建一个操作组件，我们暂且命名为test.vue
<template>
<div>
<div>
<button @click="add">+1</button>
<button @click="decrement">-1</button>
</div>
</div>
</template>
然后，我们在methods里面获取这两个操作事件
<script>
export default {
methods: {
increment(){
this.$store.dispatch("increment");
},
decrement() {
this.$store.dispatch("decrement")
}
}
}
</script>
当然上面这种写法比较麻烦，vuex还给我我们提供了mapActions这个函数，它和mapState 是一样的，把我们的 action 直接映射到store 里面的action中。
<script>
export default {
methods: {
...mapActions(['increment', 'decrement'])
}
}
</script>
<script>
import {mapActions} from 'vuex'
export default {
methods: {
// 这中写法虽然可行，但是比较麻烦
// 这时vue 提供了mapAction 函数，
// 它和mapState 是一样的，把我们的 action 直接映射到store 里面的action中。
// increment () {
// this.$store.dispatch('increment')
// },
// decrement () {
// this.$store.dispatch('decrement')
// }
// 下面我们使用一种比较简洁的写法
// ...mapActions(['increment', 'decrement'])
/**
如果事件处理函数名字和action的名字不同，给mapActions
提供一个对象，对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。
*/
// 这里实际是为了改变事件的名字
...mapActions(['decrement']),
...mapActions({
add: 'increment'
})
}
}
</script>
This time we click the button, you can see the count changes.
Finally, attach a simple pattern analysis, it should look a little more intuitive