vue ...mapgetters,vuex中mapGetters
这篇文章主要介绍了vue3.0使用mapState，mapGetters和地图操作的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue2.0中使用地图状态及地图操作的方式vue3.0中获取状态和使用行动的方式如何才能在vue3下使用地图状态这些美国石油学会(美国石油协会)呢？vue3对状态管理中mapState，mapGetters辅助函数封装1.只读应用程序接口的使用2.响应式变量直接解构会失去响应性3.手表效果清除副作用4.设置函数访问状态管理中商店数据
vue2.0中使用mapState及mapActions的方式
//使用地图状态
计算值：{
.mapState({
//.
})
}
方法：{
.mapActions([fnA ， fnB])
}
vue3.0中获取state和使用actions的方式
从“vue”导入{computed}
从" vuex "导入{useStore}
setup() {
const store=use store()；
const stateA=computed(()=store。状态。stateA)；
const stateB=computed(()=store。状态。stateB)；
const methodA=store。分派( methodA ，{name:张三});
}
如何才能在vue3下使用mapState这些api呢？
答案是封装mapState，mapGetters，mapActions方法。
1、新建useMapper.js
从" vuex "导入{ useStore }
从“vue”导入{ computed }
导出函数useStateMapper(mapper，mapFn) {
const store=use store()；
const storeStateFns=mapFn(mapper)；
const storeState={ }；
Object.keys(storeStateFns).forEach(fnKey={
//vuex源码中地图状态和地图获取者的方法中使用的是这个1000美元商店，所以更改这绑定
const fn=storeStateFns[fnKey].bind({ $ store:store })；
storeState[fnKey]=computed(fn)
})
返回存储状态
}
导出函数useActionMapper(mapper，mapFn) {
const store=use store()；
const storeActionsFns=mapFn(mapper)；
常量存储操作={ }；
Object.keys(storeActionsFns).forEach(fnKey={
storeAction[fnKey]=storeActionsFns[fnKey].bind({ $store: store })
})
返回存储操作
}
2、新建useState.js
从" vuex "导入{ mapState，createNamespacedHelpers }
从""导入{ useStateMapper } ./useMapper
从""导入{checkType} ./index
/**
*
* @param {*} moduleName模块名称
* @param {*}映射器状态属性集合[姓名,年龄]
* @返回
*/
导出函数useState(moduleName，mapper) {
设mapperFn=mapState
//如果使用模块化，则使用状态管理提供的createNamespacedHelpers方法找到对应模块的地图状态方法
if(检查类型(moduleName)==[对象字符串] moduleName。长度0){
mapperFn=createNamespacedHelpers(moduleName).地图状态
}
返回useStateMapper(mapper，mapperFn)
}
3、新建useGetters.js
从" vuex "导入{ mapGetters，createNamespacedHelpers }
从""导入{ useStateMapper } ./useMapper
从""导入{checkType} ./index
/**
*
* @param {*} moduleName模块名称
* @param {*}映射器获取程序属性集合[姓名,年龄]
* @返回
*/
导出函数useGetters(moduleName，mapper) {
设mapperFn=mapGetters
//如果使用模块化，则使用状态管理提供的createNamespacedHelpers方法找到对应模块的地图获取者方法
if(检查类型(moduleName)==[对象字符串] moduleName。长度0){
mapperFn=createNamespacedHelpers(moduleName).地图获取者
}
返回useStateMapper(mapper，mapperFn)
}
4、新建useActions.js
从" vuex "导入{ mapActions，createNamespacedHelpers }。
从""导入{useActionMapper} ./useMapper
从""导入{checkType} ./index
/**
*
* @param {*} moduleName模块名称
* @param {*}映射器方法名集合[fn1 ， fn2]
* @返回
*/
导出函数使用操作(模块名称，映射器){
设mapperFn=mapActions
//如果使用模块化，则使用状态管理提供的createNamespacedHelpers方法找到对应模块的地图操作方法
if(检查类型(moduleName)==[对象字符串] moduleName。长度0){
mapperFn=createNamespacedHelpers(moduleName).地图操作
}
返回useActionMapper(mapper，mapperFn)
}
5、页面中使用
模板
div class=home
跨度姓名：{{name}}年龄：{ {年龄}}性别：{{sex}}/span
button @click=changeName 改名/按钮
/div
/模板
脚本
//@是/src的别名
从" @/utils/useState "导入{使用状态}
从" @/utils/useAction "导入{useActions}
导出默认值{
姓名：家，
setup() {
const storeState=useState(home ，[name ， age ， sex])
常量存储操作=使用操作( home ，[setName])
const changeName=()={
storeAction.setName(李四)
}
返回{
更改名称，
.storeState，
.存储操作
};
},
};
/脚本
vue3对vuex中mapState,mapGetters辅助函数封装
1. readonly API的使用
在我们传递给其他组件数据时，如果直接将响应式数据传递给子组件。子组件如果使用数据不规范，修改了父组件传进来的小道具值没有任何反馈。
//父组件
//ReadonlyChild :info=info /
setup() {
常量信息=反应({
名称： 哇哈哈，
});
返回{
信息，
};
}
//子组件
设置（道具){
const onChangeInfo=()={
常量信息=props.info
//修改父组件传来的小道具没有任何反馈。
info.name= woowow
};
返回{
onChangeInfo，
};
}
开发中我们往往希望其他组件使用我们传递的内容，但是不允许它们修改时，就可以使用只读的了。
//父组件
//readonly子级：info= in read only /
setup() {
常量信息=反应({
名称： 哇哈哈，
});
const infoReadonly=readonly(info)；
const onChangeInfo=()={
//在父组件中可修改信息中的值，子组件依然可响应更新
info.name=父组件给你的值；
};
返回{
infoReadonly，
onChangeInfo
};
}
//子组件
设置（道具){
const onChangeInfo=()={
常量信息=props.info
//此时修改小道具时，控制台会有一个警告：
//对键"名称"的一组操作失败：目标是只读的。
info.name= woowow
};
返回{
onChangeInfo，
};
}
2. 响应式变量直接解构会失去响应性
将响应式变量直接解构会失去其响应性
const info=reactive({ age:18 })；
//直接解构后年龄值失去响应性，当在线交易函数触发时，年龄值不在变，而ageRef依然具有响应性
const { age }=信息
const { age:ageRef }=tore fs(info)；
const onChangeAge=()={
信息时代；
};
3. watchEffect 清除副作用
watchEffect API可自动收集依赖项，当依赖项改变时触发侦听器函数。当我们在侦听器函数执行额外的副作用函数，例如：发送网络请求时。每当依赖性项变更都会发起一个新的网络请求，那么上一次的网络请求应该被取消掉。这个时候我们就可以清除上一次的副作用了。
setup() {
const count=ref(0)；
const onChangeCount=()={
计数。值；
};
watchEffect((onInvalidate)={
//侦听器函数中需要发起网络请求，用定时器模拟
const timer=setTimeout(()={
console.log(请求成功啦);
}, 2000);
//在侦听器函数重新执行时触发onInvalidate函数
onInvalidate(()={
//在这个函数中清除请求
清除超时(定时器);
console.log(onInvalidate回调触发);
});
//自动收集数数的依赖
console.log(count-在改变，数数。值)；
});
返回{
数数，
onChangeCount，
};
}
4. setup 函数访问Vuex中Store数据
4.1 使用mapState辅助函数
通常需要通计算函数来获取状态中数据，并保存响应性。
setup() {
const store=use store()；
//在设置中要获取商店中的陈述。如果状态非常多，无疑这样做很繁琐
const uName=computed(()=store。状态。姓名)；
const uAge=computed(()=store。状态。年龄)；
const u height=computed(()=store。状态。身高)；
/**
* 直接使用地图状态辅助函数得不到想要的结果
* 这样获取的存储状态是一个{姓名：函数mappedState (){.},年龄：函数mappedState (){.}，高度：函数mappedState (){.} } 这样的对象
*/
const storeState=mapState([ name ， age ， height ])；
//需要对返回值进行处理
const RES storestate={ }；
Object.keys(storeState).forEach((fnKey)={
const fn=storeState[fnKey].bind({ $ store:store })；
ressstorestate[fn key]=computed(fn)；
});
返回{
乌梅，
语言，
呃高，
.resStoreState，
};
}
封装成钩住如下：
//useState.js
从“vue”导入{ computed }；
从" vuex "导入{ useStore，mapState }。
导出默认函数使用状态（映射器){
const store=use store()；
const storeStateFns=mapState(mapper)；
const storeState={ }；
Object.keys(storeStateFns).forEach((fnKey)={
const fn=storeStateFns[fnKey].bind({ $ store:store })；
storeState[fnKey]=computed(fn)；
});
返回存储状态
}
在组件中使用时
从" @/hooks/useState "导入使用状态；
setup() {
//数组用法
const state=useState([姓名,年龄,身高]);
//对象用法，可使用别名
const stateObj=useState({
uName: (state)=state.name，
uAge: (state)=state.age，
呃身高：(状态)=状态。身高，
});
返回{
.状态，
.stateObj，
};
}
4.2 mapGetters 辅助函数的封装
其原理与地图状态函数封装类似
//useGetters.js
从“vue”导入{ computed }；
从" vuex "导入{ mapGetters，使用store }。
导出默认函数useGetters(mapper: any) {
const store=use store()；
const storeggettersfns=mapGetters(mapper)；
const store getter={ }；
对象。密钥(storgettersfns).forEach((fnKey)={
const fn=storeggettersfns[fnKey].bind({ $ store:store })；
store getters[fnKey]=computed(fn)；
});
返回仓库保管员
}
使用状态和useGetters两个函数相似度很高，在进一下封装
//useMapper.js
从“vue”导入{ computed }；
从" vuex "导入{使用商店}；
导出默认函数用户映射器(映射器，映射器)
const store=use store()；
const storeStateFns=mapFn(mapper)；
const storeState={ }；
Object.keys(storeStateFns).forEach((fnKey)={
const fn=storeStateFns[fnKey].bind({ $ store:store })；
storeState[fnKey]=computed(fn)；
});
返回存储状态
}
//useState.js
从" vuex "导入{ mapState }；
从导入用户映射程序/使用映射器；
导出默认函数使用状态（映射器){
返回useMapper(映射器，映射状态)；
}
//useGetters.js
从" vuex "导入{ mapGetters }；
从导入用户映射程序/使用映射器；
导出默认函数useGetters(mapper: any) {
返回useMapper(映射器、映射获取器)；
}
4.3 对module的支持
使用状态和useGetters函数暂时还不支持传入命名空间，进一步封装用户映射器的封装保持不变。
//useState.js
从" vuex "导入{ createNamespacedHelpers，mapState }。
从导入用户映射程序/使用映射器；
导出默认函数使用状态(映射器，模块名称){
设mapperFn=mapState
如果(模块名称的类型===字符串模块名称。长度0) {
mapperFn=createNamespacedHelpers(moduleName).地图状态
}
返回useMapper(映射器，mapperFn)；
}
//useGetters.js
从" vuex "导入{ createNamespacedHelpers，mapGetters }。
从导入用户映射程序/使用映射器；
导出默认函数useGetters(mapper，moduleName) {
设mapperFn=mapGetters
如果(模块名称的类型===字符串模块名称。长度0) {
mapperFn=createNamespacedHelpers(moduleName).地图获取者
}
返回useMapper(映射器，mapperFn)；
}
//在组件中的使用
//Home.vue
setup() {
const state=使用状态([ home counter ]， home )；
const state getter=use getters([ doubleHomeCounter ]， home )；
返回{
.状态，
.国务活动家，
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。