Vuex进阶使用之modules模块化划分、mapState、mapActions辅助函数的使用

一、vuex模块化modules

1、项目根目录新建一个sotre文件夹，在store文件夹内，新建两个文件（一个文件，一个文件夹），一个index.js文件，一个modules文件夹。

• store
  • index.js --文件
  • modules --文件夹

2、store->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().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
export default new Vuex.Store(
  modules
})

3、store->modules
目录结构

• modules
  • moduleA.js
  • moduleB.js
    　　　　
    4、具体模块写法，moduleA.js

const moduleA ={
    namespaced:true,  //开启namespace:true，该模块就成为命名空间模块了
    state:{
        cartShop:"one-sotre",
   		count:0
    },
    getters:{...},
    mutations:{...},
    actions:{...}

7、Count组件中使用

<script>
import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default{
	name:'Count' ,
	data(){
	},
	computed:{
	//组件中以对象形式获取state,我们也可以用简写的方式，如果用简写方式就要以数组方式进行存取
	 ...mapState({
	        count:state=>state.cart.count
	        cartShop:state=>state.cart.cartShop
		})
		//因为我们有多个模块，并且我们为模块加上了命名空间，所以我们可以在前面指定名字，来跟vuex说我们需要从哪个模块里面获取这个状态
		 ...mapState('cart',['count','cartShop'])
	//mapGetters获取的两种方式
	//1
	...mapGetters('moduleA',['moduleAGetter']),此处的moduleA，不是以前缀的形式出现！！！
	//2.别名状态下
	...mapGetters({
	    paramGetter:'moduleA/moduleAGetter
	   })
	},
	methods:{
		4.组件中调用命名空间模块中的Mutations
		共有三种方式，如下：
		//1,3加个前缀moduleA/，都可以实现。2使用辅助函数未变名称的特殊点！！！
		//1.直接获取
		commonMutation(){
		    this.$store.commit('moduleA/moduleAMutation');
		},
		//2.用mapMutations
		...mapMutations('moduleA',['moduleAMutation']),
		//3.别名状态下
		...mapMutations({
		    changeNameMutation:'moduleA/moduleAMutation'
		}),
		5.组件中调用命名空间模块中的Actions（与mutations一致）
		共有三种方式，如下：
		1,3加个前缀moduleA/，都可以实现。2使用辅助函数未变名称的特殊点！！！
		//1.
		commonAction(){
		    this.$store.dispatch('moduleA/moduleAAction')
		},
		//2.
		...mapActions('moduleA',['moduleAAction']),
		//3.别名状态下
		...mapActions({
		    changeNameAction:'moduleA/moduleAAction'
		 })
	}
}