其他分享
首页 > 其他分享> > 搞清楚Vuex中的mapState,mapGetters,mapMutations,mapActions

搞清楚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