import Vue from 'vue'const modules = {
state:{
name: '小黑'
},
mutations:{
changeName(state){
state.name = '小白'
}
},
namespaced: true
}
export default modules;
还是那个例子，下面是组件调用方法：
<html>
<div>
{{ name }}
<el-button @click="changeName">改变名字</el-button>
</div>
</html>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
compoted:{
...mapState(['name'])
},
methods:{
...mapMutations(['changeName'])
}
}
</script>页面渲染后为：
点击按钮之后为：
组件里的按钮通过调用Vuex里的mutation方法将Vuex里的state数据改变，只不过mutations方法只能同步的，涉及到接口的就不能在它里面写，怎么办的？往下看：
4. Actions和mutations一样都是Vuex里的方法，只不过他们有两个最大的不同：
(1) Actions里可以存放异步方法，而Mutations只能放同步的；
(2) Actions里不可以更改state里的数据，state里的数据只能在Mutations里更改。
Actions是什么方法？简单的说，它就是一个Promise方法，通过不同的状态执行不同的方法，执行方法可以是Actions里的方法，也可以是Mutations里的方法。
Actions我就不举例子了，因为大部分都用于axios请求接口，简单跟大家说说这个东西怎么使用：
import Vue from 'vue'
import request from '@/api/axios'const modules = {
state:{
list:[] },
actions:{
getList({ commit }){
// 调用接口方法
request.getList()
.then((response)=>{
// commit用来分配mutations方法
commit('getList',response)
})
}
}，
mutations：{
getList(state,response){
state.list = response.data
}
}
}
简单利用actions异步方法分配给mutations方法，然后在mutations方法里给state里的数据赋值，取到接口数据。
commit用于分配mutations方法，dispatch用于分配actions方法，都需要传参进去。
组件调用其实和调用mutations方法类似：
<script>
import { mapState,mapActions } from 'vuex'
export default {
computed:{
...mapState(['list'])
},
mounted(){
this.getList()
},
methods:{
...mapActions(['getList'])
}
}
</script>这样就基本完成了vuex传值。
5. module可以把vuex分为不同的模块，使业务逻辑变得更清晰，更准确。在上面的代码里，有const modules，给它不同的名字就是分为不同的模块。不同的module可以存入不同的数据和方法，使用起来非常方便。
