Vuex介绍2

2023-12-29 17:43:42

续上一个的Vuex今天继续介绍

4 核心概念-getters

除了state之外,优势还需要从state中派生一些状态,这些状态时依赖state的,此时会用到getters

例如:state中定义了list,为1-10的数组,组件中,需要显示所有大于5的数据

state:{
	list:[1,2,3,4,5,6,7,8,9,10]
}
1.定义getters
getters:{
// 注意
// (1)getters函数的第一个参数是 state
// (2)getters函数的第二个参数是 getters中所有的方法
// (3)getters函数必须要有返回值
	filterList(state,getters){
		return state.list.filter(item => item>5)
	}
}

getter的返回值会根据它的依赖被缓存起来,且只有当他的依赖值发生了改变才会被重新计算。

2.访问getters

① 通过 store 访问 getters

{{ $store.getters.filterList }}

② 通过辅助函数 mapGetters 映射

computed:{
	...mapGetters(['filterList'])
}

{{ filterList }}

5 核心概念-模块module(进阶语法)

由于vuex使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。(当项目越来越大的时候,vuex就会变得越来越难以维护)

为解决上述问题,Vuex允许将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块---从上至下进行同样方式的分割。

模块拆分 例如:user模块:在store下新建modules文件,里面用于存放模版user.js

在user.js中

const state = {
	userInfo:{
		name:'zs',
`		age:18
	}
}

const mutations = {}
const actions = {}
const getters = {}

export default {
	state,   // 这里的 state 对象是模块的局部状态
	mutations,
	actions,
	getters
}

在 index.js 文件中

import user from './modules/user'

const store = new Vuex.Store({
	modules:{
		user
	}
})

5.1 使用模块中 state 的数据

尽管已经分模块了,但其实子模块的状态,还是会挂到根级别的state 中,属性名就是模块名

① 直接通过模块名访问 $store.state.模块名.xxx

② 通过 mapState 映射

默认跟级别的映射 mapState(['xxx'])

子模块的映射 mapState('模块名',['xxx']) ----- 需要开启命名空间

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

5.2 使用模块中 getters 中的数据

① 直接通过模块名访问 $store.getters[' 模块名/xxx']

② 通过 mapGetters 映射

默认跟级别的映射 mapGetters(['xxx'])

子模块的映射 mapGetters('模块名',['xxx']) ----- 需要开启命名空间

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

5.3 使用模块中 mutations 的调用语法

调用子模块中的mutations:

① 直接通过模块名访问 $store.commit[' 模块名/xxx ',额外参数]

② 通过 mapMutations 映射

默认跟级别的映射 mapMutations(['xxx'])

子模块的映射 mapMutations('模块名',['xxx']) ----- 需要开启命名空间

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

5.4 使用模块中的 actions 的调用语法

调用子模块中 actions:

① 直接通过 store 调用 $store.dispatch('模块名/xxx',额外参数)

② 通过 mapActions 映射

默认跟级别的映射 mapActions('[xxx]')

子模块的映射 mapActions('模块名',['xxx']) -------需要开启命名空间

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

注意:默认模块中的getter、mutation和actions 会被挂载到全局,需要开启命名空间,才会挂载到子模块。

文章来源:https://blog.csdn.net/m0_72174711/article/details/135239775
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。