查看网站开发语言方法,wordpress用什么语言,互联网建筑公司,如何制作一个个人网站续上一个的Vuex今天继续介绍
4 核心概念-getters
除了state之外#xff0c;优势还需要从state中派生一些状态#xff0c;这些状态时依赖state的#xff0c;此时会用到getters
例如#xff1a;state中定义了list#xff0c;为1-10的数组#xff0c;组件中#xff0c;需…续上一个的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:{
// 注意
// 1getters函数的第一个参数是 state
// 2getters函数的第二个参数是 getters中所有的方法
// 3getters函数必须要有返回值filterList(state,getters){return state.list.filter(item item5)}
}
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/userconst 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 会被挂载到全局需要开启命名空间才会挂载到子模块。
