vuex模块批量导入和模块数据、方法调用总结

1.批量导入模块

假设模块目录与 index.js同级

index.js

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

//导入modules所有模块
const modulesFiles = require.context('./modules', true, /\.js$/);

const modules={};
modulesFiles.keys().forEach(key => {
    const module= modulesFiles(key).default;
	const moduleName=key.slice(2,-3);//以文件名为模块名，./user.js 截取（user）
    modules[moduleName]=module
});

const store=new Vuex.Store({
	modules,
	
});

export default store

2.调用模块数据和方法

假设user.js模块数据为：

const state = {
	name: '测试'
};
const getters = {
	getName: state => state.name
}
const mutations = {
	SET_NAME(state, val) {
		state.name = val;
	}
};
const actions = {

	setName({commit}, val) {
		return new Promise((resolve, reject) => {
			setTimeout(() => {
				commit('SET_NAME', val);
				resolve()

			}, 100)
		}).catch(err => {
			reject(err)
		})
	}
};

export default {
	namespaced: true,
	state,
	mutations,
	actions,
	getters
};

模块名为：user

(1) 获取user state数据：
方法1：this.$store.state.user.name //测试
方法2：mapState

 import {mapState} from 'vuex';
 export default {
  computed:{
			...mapState('user',['name']),//或...mapState('user',{'userName':'name'}),
			
		},
  created(){
  //调用
     console.log(this.user);//测试   或 this.userName
  }		
}

(2) 获取 user getters
方法1：this.$store.getters[‘user/getName’]
方法2：mapGetters（类似mapState)

computed:{
			...mapGetters('user',['getName']),//或...mapState('user',{'getUserName':'getName'}),
			
		},
  created(){
  //调用
     console.log(this.getName);//测试   或 this.getUserName
  }		

(3) 调用 user mutations

方法1：this.$store.commit(‘user/SET_NAME’,‘修改’)
方法2：mapMutations

     import {mapMutations} from 'vuex';
     export default {
       created(){
        //调用
        this.SET_NAME('修改') //或this.set_name('修改')
     },
       methods:{
         ...mapMutations('user',['SET_NAME']),//或...mapMutations('user',{ set_name:'SET_NAME'})
       }
     }

(4) 调用user actions
方法1：await this.$store.dispatch(‘user/setName’,‘修改’)
方法2：mapActions（类似mapMutations）

  import {mapActions} from 'vuex';
   export default {
    async created(){
        //调用
       await this.setName('修改') //或await this.set_name('修改')
     },
     methods:{
         ...mapActions('user',['setName']),//或...mapMutations('user',{ set_name:'setName'})
       }
    }