搞清楚Vuex中的mapState,mapGetters,mapMutations,mapActions
作者：互联网
1.引入vuex以后，我们需要在state中定义变量,类似于vue中的data，通过state来存放状态
import Vue from 'Vue';
import Vuex from 'Vuex';
Vue.use(Vuex)
export default new Vuex.Store({
state:{
nickname:'zs',
age:20,
gender:'男'
},
mutations:{},
actions:{},
modules:{}
})
注册组件
<div id="app">
<vabout> </vabout>
<vhome> </vhome>
</div>
vhome组件中的内容
<div class="home">{{$store.state.nickname}}</div>
vabout组件中的内容
<h1>{{$store.state.nickname}}:{{$store.state.age}}</h1>
定义完vuex后，任何一个组件再想使用vuex只需要this.$store.state即可获取到vuex中的state对象，获取到仓库中的定义数据
注意:props,methods,data,computed的初始化都是在beforeCreated和created之间完成的
2.辅助函数mapState
import {mapState} from 'vuex'
export default {
name: 'home',
computed: mapState(['nickname','age','gender'])
}
mapState(['nickname','age','gender']) //映射哪些字段就填入哪些字段
注释:使用mapState时，前面的方法名和获取的属性名是一致的，computed中还需要写其余的属性时，写法如下
1 computed: { //computed是不能传参数的
2 value(){
3 return this.val/7
4 },
5 ...mapState(['nickname','age','gender'])
6 }
3.getters
getters其实就是相当于计算属性，通过getters进一步处理，得到我们想要的值，并且允许传参，第一个参数就是state
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { //存放状态
nickname:'Simba',
firstname:'张',
lastname:'三丰',
age:20,
gender:'男',
money:1000
},
getters:{
realname(state){
return state.firstname+state.lastname
},
money_us(state){
return (state.money/7).toFixed(2)
}
},
mutations: {},
actions: {},
modules: {}
})
在组件中的使用就是mapGetters
computed: { //computed是不能传参数的
valued(){
return this.value/7
},
...mapGetters(['realname','money_us'])
}
4.mutations就是methods，mutations需要通过commit来调用里面的方法，也可以传入参数，第一个参数是state，第二个参数是载荷payload，也就是额外的参数
vuex中的定义写法:
mutations: { //类似于methods
addAge(state,payLoad){
state.age+=payLoad.number
}
}
template部分:
<div class="home"> <div><button @click="test">测试</button></div> </div>
js部分:
methods:{
test(){
this.$store.commit('addAge',{
number:5
})
}
}
调用的时候第二个参数最好写成对象形式，这样就可以传递更多的信息，但是这还不是常用写法
5.mapMutations辅助函数
methods:{
...mapMutations(['addAge'])
}
mapMutations(['addAge'])这一句就相当于下面的代码
addAge(payLoad){
this.$store.commit('addAge',payLoad)
}
参数我们可以在调用这个方法的时候写入
<button @click="addAge({number:5})">测试</button>
思考一个问题为什么不直接对state进行更改，而是使用mapMutations去进行更改呢
原因如下：
(1)mutations中不光可以做赋值操作;
(2)作者在mutations中做了类似埋点操作，如果mutations中操作的话，会被检测到，可以更方便调试工具调试，调试工具可以检测到实时变化，而直接改变state中的值，无法实时监测
注意：mutations中只能写同步方法，不能写异步，比如axios,setTimeout等，这些都不能写，mutations的主要作用就是为了修改state的
6.actions
action类似于mutations,区别就是action可以提交mutations
action也不要直接去操作state，而是去操作mutation,action包含异步操作，类似于axios请求，都可以放在action中，action中的默认方法就是异步，并且返回promise。
store中的定义写法:
actions: {
getUserInfo(){
return {
nickname:'Simba',
age:20
}
}
}
组件中的写法:
created(){
var res = this.getUserInfo()
console.log(res)
},
methods:{
...mapActions(['getUserInfo'])
}
实际的场景，state里面的属性值是空的，登录后再获取对应的信息。
Vue中组件代码
created(){ this.getUserInfo()}
methods:{ ...mapActions([‘getUserInfo’])}
store部分
首先要想得到数据，那就相当于给state赋值，那首先想到的就是mutations来操作state，但是请求的接口都是axios异步，所以就不能用mutations而是用actions，通过actions来操作mutations从而操作state
export default new Vuex.Store({
state: {
nickname:‘’,
age:0,
gender:'',
money:0
},
mutations: {
setUerInfo(state,payLoad){
state.nickname = payLoad.nickname
state.age = payLoad.age
state.gender = payLoad.gender
state.money = payLoad.money
}
},
actions: { //actions没有提供state当参数
async getToken({commit}){
var res = await axios.get('/token接口')
commit('setToken',res)
},
async getUserInfo(context){
//context可以理解为它是整个Store的对象.类似于this.$store，
他里面包含了state，getter，mutations，actions
const res = await axios.get('/接口url')
context.commit('setUerInfo',res)
//相当于 this.$store.commit,第一个参数是方法名，第二个参数是要传入的数据
context.dispatch('getToken')
//actions也可以调用自己的其他方法
},
}
})
运行过程，调用getUserInfo方法以后，进入actions，然后通过commit调用setUserInfo，将res（用户信息）作为参数传入传入进去，并将相对应的属性值赋值给state，完成这一过程的操作。
getUserInfo的参数也可以用解构，这样更方便
async getUserInfo({commit,dispatch}){
const res = await axios.get('/接口url')
commit('setUerInfo',res)
dispatch('getToken')
}
标签：nickname,age,mutations,actions,mapState,state,mapActions,commit,mapGetters 来源： https://www.cnblogs.com/wk-66/p/15066761.html