vue如何更优雅的存取仓库中的数据

一直想搞清楚mapState和mapMutations之间的关系，在网上查阅资料，大多都是很累赘，且篇幅太长，阅读起来很是费时间，今天自己动手总结了下，以后就丰衣足食。

关于在仓库进行存取数据简单的方法这里就不在累赘了，本文主要是应用mapState和mapMutations的做法，请看下面代码：

• 第一步：初始化仓库

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
    state: {
	unionid:'',
        merchantList：''
    },
    mutations: {
	// 设置Unionid
	setUnionid(state,id){
	    state.unionid = id
	},
	// 设置setMerchantList
        setMerchantList(state,list){
	    state.merchantList=list
	},
    }
    export default store

• 第二步：在你需要的页面首先引入语法糖函数mapState和mapMutations

 import { mapState,	mapMutations } from 'vuex'

• 第三步：在methods中，通过mapMutations去将merchantList存在仓库store中

 export default {
    data() {
    },
    methods:{
        ...mapMutations(['setMerchantList']),
        getMerchantList(){
	    this.$api.post('').then((res)=>{
	    if(res) {
	         this.setMerchantList(res.data.Data)
	    }
	}
    }
}
注意：此方法等同于：this.$store.commit('setMerchantList')

• 第四步：在computed计算属性中，通过mapState去取储存在store中的merchantList

<view class="storeWrap" v-for="(item,index) in merchantList" :key="index" @click="switchStore(index)"></view>
 export default {
    data() {
        computed: {
	    ...mapState(['merchantList'])
	},
    }
}
注意：此方法等同于：this.$store.state.merchantList