vue 状态管理五、Module用法

2023-12-02 16:21:10

系列导航

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>

码农公寓