Vuex(篇5-4)——modules中getters

2023-03-20  本文已影响0人  owlcity

模块B(moduleb.js)

getters:{
  Bname (state) {
    return 'Bname'+state.hisname.toString()
  }
 }

全局(index.js)

getters:{
  theirname(state){
    return 'them'+state.count.toString()
  }
}

组件中调用模块/全局中的getters

方式1:通过属性this.$store.getters访问
Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值

<p>调用全局的getter:{{this.$store.getters.theirname}}</p>
<p>调用模块的B的getter:{{this.$store.getters['b/Bname']}}</p>

方式2:通过辅助函数mapGetters

<p>a:_   {{useAget}}</p>
computed: {
   ...mapGetters({
    useAget:'a/Aname'
  }) 
}
//另一种写法(不含别名)
computed: {
  ...mapGetters('a',['Aname'])
     
}    
<p>调用模块A中的getter:{{Aname}}</p>
上一篇 下一篇

猜你喜欢

热点阅读