为了账号安全,请及时绑定邮箱和手机立即绑定

vuex中显示子模块中的state要怎么写,通过...mapState的方式?

vuex中显示子模块中的state要怎么写,通过...mapState的方式?

饮歌长啸 2019-05-24 15:54:30
selectModule子模块(module)有一个state值是keyword,可以通过this.$store.state.selectModule.keyword找到;现在我想通过下面...mapState的扩展方法来写,要怎么写呢?keyword":"selectModule.keyword"这样写不行,见下面代码注释;select.vueimport{mapState,mapMutations,mapActions,mapGetters}from"vuex"exportdefault{name:'app',data(){return{}},computed:{...mapState({//"keyword":"count"//count可以显示"keyword":"selectModule.keyword"//selectModule.keyword显示不出来???})},methods:{isShowFun:function(){this.$emit("isShowFun2");}},created:function(){}}store/index.jsimportVuefrom"vue"importVuexfrom"vuex"import$from"jquery"Vue.use(Vuex);varselectModule={state:{keyword:60},getters:{lists:function(){varurl="https://easy-mock.com/mock/5a61abf341d8910ea886ec50/searchLists";//return$.get(url,{},function(result){//returnresult.lists;//})varresult={lists:[{title:"数据一"},{title:"数据二"},{title:"数据三"}]}returnresult.lists;}},mutations:{changeKeyword:function(state,n){state.keyword=n;}},actions:{changeAction:function(context,n){context.commit("changeKeyword",n);}}}varstore=newVuex.Store({//注意这里的Store是大写state:{count:100,count2:100},mutations:{addIncrement:function(state,n){setTimeout(function(){state.count+=n;},600)},reduce:function(state,n){setTimeout(function(){state.count-=n;},600)},addIncrement2:function(state,n){state.count2+=n;},reduce2:function(state,n){state.count2-=n;}},actions:{addAction:function(context,n){setTimeout(function(){context.commit("addIncrement2",n);},600)},reduceAction:function(context,n){setTimeout(function(){context.commit("reduce2",n);},600)}},getters:{limitNum:function(state){vara=state.count>120?120:state.count;returna;},limitNum2:function(state){vara=state.count2>120?120:state.count2;returna;}},modules:{selectModule}})exportdefaultstore
查看完整描述

3 回答

?
小0白

TA贡献1条经验 获得超0个赞

标记。

查看完整回答
反对 回复 2020-09-04
?
qq_花开花谢_0

TA贡献1835条经验 获得超7个赞

...mapState({
//"keyword":"count"//count可以显示
"keyword":state=>state.selectModule.keyword
})
                            
查看完整回答
反对 回复 2019-05-24
  • 3 回答
  • 1 关注
  • 3605 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号