Vuex介绍2

续上一个的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 会被挂载到全局，需要开启命名空间，才会挂载到子模块。