vuex mapstate mapgetter,
地图获取者辅助函数仅仅是将商店中的吸气剂映射到局部计算属性，在组件或界面中不使用地图获取器调用映射状态管理中的吸气剂，在组件或界面中使用地图获取器调用映射状态管理中的吸气剂，具体内容跟随小编一起通过本文学习吧
地图获取者辅助函数
地图获取者辅助函数仅仅是将商店中的吸气剂映射到局部计算属性：
1、在组件或界面中不使用mapGetter调用映射vuex中的getter
1.1 调用映射根部store中的getter
！-测试。vue -
模板
div class=vuexReponse
div @click=changeVal 点击/div
div state hello: { { state hello } }/div
div getter shello:" { { getter shello } }/div
/div
/模板
脚本
导出默认值{
观察：{
gettersHello(newVal，oldVal) {
控制台。log( getter shello new val ，new val)；
控制台。log( getter shello老瓦尔，老瓦尔)；
}
},
计算值：{
stateHello() {
归还这个100美元商店。状态。状态您好
},
gettersHello() {
归还这个store.getters.gettersHello
}
},
方法：{
changeVal() {
这个100美元商店。提交(变异外壳，2)
}
}
}
/脚本
/**
*商店。射流研究…
*/
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
Vue.use(Vuex)
导出默认的新Vuex .商店({
状态：{
状态你好：1
},
getters: {
gettersHello: (state)={
返回state.stateHello * 2
}
},
突变：{
变异sHello(州，val) {
console.log(val ，val)；//2
state.stateHello=val
}
},
})
流程：在测试。某视频剪辑软件界面中点击调用changeVal()，changeVal方法通过commite传参英国压力单位并调用商店。射流研究…中的变异外壳()方法变异外壳方法修改状态中的stateHello的值，在吸气剂的盖特谢洛中监听stateHello的值，stateHello的值的改变触发了盖特谢洛在测试。某视频剪辑软件界面计算中计算了store.getters.gettersHello，这个就将盖特谢洛映射到store.gettes.gettersHello的值，通过模板将盖特谢洛渲染到数字正射影像图中，同时由于盖特谢洛的改变也能触发看中盖特谢洛实现对商店。吸气剂。吸气剂外壳数据改变的监听。
1.2 调用映射modules模块store中的getter
！-模块测试
模板
div class=vuexReponse
div @click=changeVal 点击/div
div状态hello:{ {状态hello } }/div
div getter shello:{ { getter shello } }/div
/div
/模板
脚本
导出默认值{
观察：{
gettersHello(newVal，oldVal) {
控制台。log( getter shello new val ，new val)；
控制台。log( getter shello老瓦尔，老瓦尔)；
}
},
计算值：{
stateHello() {
归还这个。你好
},
gettersHello() {
归还这个100美元商店。getters[ vuexTest/getter shello ]
}
},
方法：{
changeVal() {
这个100美元商店。提交( vuexTest/mutation shello ，2)
}
}
}
/脚本
/**
* 模块vuexTest.js
*/
导出默认值{
命名空间：对，
状态：{
状态你好：1
},
getters: {
gettersHello: (state，getters，rootState，rootGetters)={
console.log(state ，状态);
console.log(getters ，getters)；
console.log(rootState ，根状态)；
console.log(rootGetters ，根getters)；
返回state.stateHello * 2
}
},
突变：{
变异sHello(州，val) {
控制台。日志( 1111 )；
console.log(val ，val)；
state.stateHello=val
}
},
动作：{
}
}
需要注意的地方是在计算中计算映射模块中的吸气剂的方法时调用方式与获取模块中的状态中的数据不同
这个100美元商店。getters[ vuexTest/getter shello ]
2、在组件或界面中使用mapGetter调用映射vuex中的getter
2.1 调用映射根部store中的getter
/**
*商店。射流研究…
*/
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
Vue.use(Vuex)
导出默认的新Vuex .商店({
状态：{
状态你好：1
},
getters: {
gettersHello: (state)={
返回state.stateHello * 2
}
},
突变：{
变异sHello(州，val) {
state.stateHello=val
}
},
})
！-测试。vue -
模板
div class=vuexReponse
div @click=changeVal 点击/div
div状态hello:{ {状态hello } }/div
div getter shello:{ { getter shello } }/div
divgettersHelloOther { { gettersHelloOther } }/div
/div
/模板
脚本
从" vuex "导入{ mapGetters }；
导出默认值{
名称： vuexReponse ，
组件：{
},
data() {
返回{
}
},
观察：{
gettersHello(newVal，oldVal) {
控制台。log( getter shello new val ，new val)；
控制台。log( getter shello老瓦尔，老瓦尔)；
}
},
计算值：{
stateHello() {
归还这个100美元商店。状态。状态您好
},
.mapGetters([gettersHello])，//数组形式
.mapGetters({ //对象形式
getter shello:“getter shello”
}),
.mapGetters({
getter shelloother: getter shello //对象形式下改变映射
}),
},
方法：{
changeVal() {
这个100美元商店。提交(变异外壳，2)
}
}
}
/脚本
2.2 调用映射根部store中的getter
/**
* vuexTest.js
*/
导出默认值{
命名空间：对，
状态：{
状态你好：1
},
getters: {
gettersHello: (state，getters，rootState，rootGetters)={
console.log(state ，状态);
console.log(getters ，getters)；
console.log(rootState ，根状态)；
console.log(rootGetters ，根getters)；
返回state.stateHello * 2
}
},
突变：{
变异sHello(州，val) {
控制台。日志( 1111 )；
console.log(val ，val)；
state.stateHello=val
}
},
动作：{
}
}
！-模块测试。vue -
模板
div class=vuexReponse
div @click=changeVal 点击/div
div状态hello:{ {状态hello } }/div
div getter shello:{ { getter shello } }/div
divgettersHelloOther { { gettersHelloOther } }/div
/div
/模板
脚本
从" vuex "导入{ mapGetters }；
导出默认值{
名称： vuexReponse ，
观察：{
gettersHello(newVal，oldVal) {
控制台。log( getter shello new val ，new val)；
控制台。log( getter shello老瓦尔，老瓦尔)；
}
},
计算值：{
stateHello() {
归还这个。你好
},
.mapGetters([ vuexTest/getter shello ])，//数组形式
.mapGetters(vuexTest ，{ //对象形式
getter shello:“getter shello”
}),
.mapGetters(vuexTest ，{
getter shelloother: getter shello //对象形式下改变映射
}),
},
方法：{
changeVal() {
这个100美元商店。提交( vuexTest/mutation shello ，2)
}
}
}
/脚本
这三种形式
.mapGetters([ vuexTest/getter shello ])，//数组形式
.mapGetters(vuexTest ，{ //对象形式
getter shello:“getter shello”
}),
.mapGetters(vuexTest ，{
getter shelloother: getter shello //对象形式下改变映射
}),
到此这篇关于状态管理中辅助函数地图获取者的基本用法详解的文章就介绍到这了，更多相关vuex mapGetters使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。