vuex mapState、mapGetters、mapActions、mapMutations的使用

例子：

 

index.js

 

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都是一样的道理。牢记~~~

 

 

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调用

 

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

例如：

//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
})

 

使用

​

<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>