vue 状态管理 五、Module用法

系列导航

vue 状态管理 一、状态管理概念和基本结构

vue 状态管理 二、状态管理的基本使用

vue 状态管理 三、Mutations和Getters用法

vue 状态管理 四、Action用法

vue 状态管理 五、Module用法

Module用法

一、基本知识

1、Module是模块的意思, 为什么在Vuex中我们要使用模块呢?

（1）Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.

（2）当应用变得非常复杂时,store对象就有可能变得相当臃肿.

（3）为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等

2、代码组织形式

二、效果

页面中调用action中的方法

三、目录结构

四、源码

index.js

import { createStore} from 'vuex'
import moduleA from './modules/moduleA'

export default createStore({
	state: {
		counter: 0,
	},
	mutations: {
	},
	actions: {
	},
	getters: { },
	modules: {
		 a: moduleA
	}
})

moduleA.js

export default {
  state: {
    name: '张三'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  getters: {
    fullname(state) {
      return state.name + 'AAAAAA'
    },
    fullname2(state, getters) {
      return getters.fullname + 'BBBBBB'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  actions: {
    aUpdateName(context,payload) {
      console.log(context);
      setTimeout(() => {
        context.commit('updateName', payload)
      }, 1000)
    }
  }
}

App.vue

<template>
	<div >
	<h2>----------App内容: modules中的内容----------</h2>
	<h2>{{$store.state.a.name}}</h2>
	<button @click="updateName">修改名字</button>
	<h2>{{$store.getters.fullname}}</h2>
	<h2>{{$store.getters.fullname2}}</h2>
	<h2>{{$store.getters.fullname3}}</h2>
	<button @click="asyncUpdateName">异步修改名字</button>
	</div>
</template>

<script>
	import { 	computed } from 'vue'
	import { 	useStore } from 'vuex'
	export default {
		components: {
		},
		methods: {
			updateName() {
			  this.$store.commit('updateName', '李四')
			},
			asyncUpdateName() {
			  this.$store.dispatch('aUpdateName','王五')
			}

		},
		setup() {
			return {

			}
		}
	}
</script>