vuex mapState、mapGetters、mapActions、mapMutations的使用

时间 2019-11-09 标签 vuex mapstate mapgetters mapactions mapmutations 使用

例子：vue

index.jsvuex

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'

Vue.use(Vuex)

const state = {
    userInfo: { phone: 111 }, //用户信息
    orderList: [{ orderno: '1111' }], //订单列表
    orderDetail: null, //订单产品详情
    login: false, //是否登陆
}

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
})

computed: {
            ...mapState([
                'orderList',
                'login'
            ]),
        },   
        mounted(){  
            console.log(typeof orderList); ==>undefind
            console.log(typeof this.orderList)==>object
        }

mapState经过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要，这个映射直接映射到当前Vue的this对象上。数组

因此经过this都能将这些对象点出来，同理，mapActions, mapMutations都是同样的道理。牢记~~~app

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    data:'test'
  },
  getters:{
    
  },
  mutations:{

  },
  actions:{

  }
})

<template>
  <div id="app">
    {{count}}
　　 //{{data}} </div>
</template>
<script>
//想要使用 首先须要按需引入
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  // 经过对象展开运算符将count混入computed对象中,做为computed对象的方法使用
  computed:{
    //至关于
    // count(){
    //   return this.$store.state.data
    // }
　　
　　//采用对象方式至关于重命名
    ...mapState({
     count: 'data'
    })
　　//采用数组方式
　　//...mapState([data])
　　//可在其余钩子中使用this.data调用　　
  }
  //其余mapGetters,mapMutations,mapActions原理同样 
} 
</script> 
<style> 

</style>

另外mapState经过扩展运算符将store.state.data映射this.count 这个this 很重要，这个映射直接映射到当前Vue的this对象上。函数

在钩子函数中可直接 this.count调用this

当state,mutations,actions数量不少时，在一个文件夹下不方便管理。可把state,getters,mutations,actions分别写在不一样文件内，经过export 导出。再在一个文件中引入。spa

例如：code

//state.js
const state={
  count:10
}
export default state;   //切记记得导出

//getters.js
export const gets= state => state.count   
//这里直接导出 就不用export default
             至关于 gets=function(state){
　　　　　　　　　　　　   return state.count
　　　　　　　　　　　}

//mutations.js
const mutations={
  add(state){
    state.count+=1
  },
  sub(state){
    state.count-=1
  }
}

export default mutations;

//actions.js
export const addactions=(context)=>{
  context.commit('add')
}
export const subactions=(context)=>{
  context.commit('sub')
}

全部文件导出后在一个文件内统一引入对象

//store文件夹下的store.js
import Vue from 'vue'
import Vuex from 'vuex'

import state from './state.js'
//因为上边的getters.js 和actions.js是经过export 导出每个，
import * as getters from './getters.js'
import mutations from './mutations.js'
import * as actions from './actions.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

使用blog

<template>
  <div id="app">
    <div>数量{{count}}</div>
    <div @click="add">增长</div>
    <div @click="sub">减小</div>
  </div>
</template>

<script> import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

export default {
  computed:{
　　//注意这里能够直接使用，由于经过...mapxxx引进来，由于是state,因此能够直接当对象的属性使用，如果mutations，actions则当对象的方法使用。
    ...mapState(["count"])

  },
  methods:{
    ...mapMutations(["add","sub"])
  }
}
</script>