mutations
在vue 中，只有mutation 才能改变state. mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字，
先看上一篇文章的例子：
在没有用vuex的时候，我们可以实现点击颜色切换
用了vuex后，只实现了颜色变换一次的功能，那我们可不可以变换很多次呢？
mutations 登场 , 问题迎刃而解 :
store.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
show:false
}
export default new Vuex.Store({
state,
mutations:{
switch_color(state){
state.show = state.show?false:true
}
}
})
父组件：
<template>
<div>
<a href="javascript:;" @click="$store.commit('switch_color')">点击</a>
<children ></children>
</div>
</template>
<script>
import children from "@/components/children"
export default {
components: {
children
}
}
</script>
使用$store.commit('switch_color') 来触发 mutations 中的 switch_color 方法。
再举个例子
1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件
const state = { count:1 }
2、用export default 封装代码，让外部可以引用
export default new Vuex.Store({
state
});
store.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
count:1
}
export default new Vuex.Store({
state,
mutations:{
add(state){
state.count += 1;
},
reduce(state){
state.count -= 1;
}
}
})
新建一个vue的模板，位置在components文件夹下，名字叫page.vue。在模板中我们引入我们刚建的store.js文件，并在模板中用{{$store.state.count}}输出count 的值。
<template>
<div>
<div>{{$store.state.count}}</div>
<input type="button" @click="$store.commit('add')" value="+">
<input type="button" @click="$store.commit('reduce')" value="-">
</div>
</template>
<script>
import store from '../store/store'
export default {
}
</script>
这样进行预览就可以实现对vuex中的count进行加减了。
注意：mutations里的操作必须是同步的
你一定好奇 , 如果在 mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要 在 mutationss 里执行异步操作而已。
actions
action去commit mutations, 所以还要定义action. store.js 里面添加actions.
store.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
show:false,
count:1
}
export default new Vuex.Store({
state,
mutations:{
switch_color(state){
state.show = state.show?false:true
},
add(state){
state.count += 1;
},
reduce(state){
state.count -= 1;
}
},
actions:{
addPlus(context){
context.commit('add')
},
reducePlus(context){
context.commit('reduce');
}
}
})
action 和mutions 的定义方法是类似的，我们要dispatch 一个action, 所以actions 肯定有一个名字，dispatch action 之后它要做事情，就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context, 它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性， context.commit 就会执行commit命令。
其实actions 还可以简写一下， 因为函数的参数是一个对象，函数中用的是对象中一个方法，我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions
actions:{
addPlus({commit}){
commit('add')
},
reducePlus({commit}){
commit('reduce');
}
}
})
当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.
打开page.vue 组件，给两个按钮添加click 事件。
<template>
<div>
<div>{{$store.state.count}}</div>
<input type="button" @click="$store.dispatch('addPlus')" value="+">
<input type="button" @click="$store.dispatch('reducePlus')" value="-">
</div>
</template>
<script>
import store from '../store/store'
export default {
}
</script>
context：上下文对象，这里你可以理解称store本身。
{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
官方推荐 , 将异步操作放在 action 中。
getter
有的组件中获取到 store 中的state, 需要对进行加工才能使用，computed 属性中就需要写操作函数，如果有多个组件中都需要进行这个操作，那么在各个组件中都写相同的函数，那就非常麻烦，这时可以把这个相同的操作写到store 中的getters, 每个组件只要引用getter 就可以了，非常方便。Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。
store.js:
export default new Vuex.Store({
state,
getters:{
count:function(state){
return state.count += 100;
}
},
mutations:{
switch_color(state){
state.show = state.show?false:true
},
add(state){
state.count += 1;
},
reduce(state){
state.count -= 1;
}
},
actions:{
addPlus({commit}){
commit('add')
},
reducePlus({commit}){
commit('reduce');
}
}
})
我们在组件中使用 $store.state.count 来获得状态 count , 类似的 , 我们可以使用 $store.getters.count 来获得状态 count 。
page.vue:
<template>
<div>
<div>{{$store.getters.count}}</div>
<input type="button" @click="$store.dispatch('addPlus')" value="+">
</div>
</template>
<script>
import store from '../store/store'
export default {
}
</script>
注意 : $store.getters.count 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。