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>