美文网首页
vuex-mapState和mapGetters

vuex-mapState和mapGetters

作者: tutututudou | 来源:发表于2022-07-01 00:03 被阅读0次

    每次获取store里面的值,我们都是这么写的

    <h2>结果是:{{$store.state.sum}}</h2>
     <h2>sum做处理的结果是:{{$store.getters.bigSum}}</h2>
      <h2>结果是:{{$store.state.sum}}</h2>
       <h2>年龄:{{$store.state.name}}</h2>
       <h2>名字:{{$store.state.age}}</h2>
       <h2>学校:{{$store.state.shool}}</h2>
       <h2>地址:{{$store.state.addr}}</h2>
    

    为了省略掉$store.state,我们可以写成计算属性的模式

     computed:{
       he(){
         return this.$store.state.sum
       },
       xuexiao(){
         return this.$store.state.shool
       },
       dizhi(){
         return this.$store.state.addr
       },
       mingzi(){
         return this.$store.state.name
       },
       nianling(){
         return this.$store.state.age
       }
     }
    

    展示部分

     <h2>结果是:{{he}}</h2>
       <h2>年龄:{{nianling}}</h2>
       <h2>名字:{{mingzi}}</h2>
       <h2>学校:{{xuexiao}}</h2>
       <h2>地址:{{dizhi}}</h2>
       <h2>计算属性处理:{{he}}</h2>
    

    这就可以省略展示部分的this.$store.state

    • vuex有mapState方法,可以在computed中简写一些计算属性

    首先打印mapState

     mounted(){
       console.log(mapState({he:'sum',xuexiao:'shool'}))
     },
    //{he: ƒ, xuexiao: ƒ}
    

    这一个返回值是一个对象
    这个结果要写在computed对象里面,所我们用对象展开运算符(...mapState)

     computed:{
       //对象写法,这个mapState可以使其生成计算属性,从state中获取数据,
       //键就是生成的函数名,值就是state对象的属性名
       ...mapState({he:'sum',xuexiao:'shool',dizhi:'addr',mingzi:'name',nianling:'age'})
     },
    

    模板展示

      <h2>结果是:{{he}}</h2>
       <h2>年龄:{{nianling}}</h2>
       <h2>名字:{{mingzi}}</h2>
       <h2>学校:{{xuexiao}}</h2>
       <h2>地址:{{dizhi}}</h2>
    

    数组写法:

    // 函数名和属性名相等时,可以用数组的简写模式
       ...mapState(['sum','shool','addr','name','age'])
    

    模板展示

       <h2>结果是:{{sum}}</h2>
       <h2>年龄:{{name}}</h2>
       <h2>名字:{{shool}}</h2>
       <h2>学校:{{addr}}</h2>
       <h2>地址:{{age}}</h2>
    

    mapGetters

    同理,展示的是

     <h2>sum做处理的结果是:{{$store.getters.bigSum}}</h2>
    

    在计算属性中可以写

      bigSum(){
         return this.$store.getters.bigSum
       },
    

    简写

    import { mapState,mapGetters } from 'vuex'
      // 对象写法
       ...mapGetters({bigSum:'bigSum'})
     //  数组写法
      ...mapGetters(['bigSum'])
    

    展示

    <h2>getters数据:{{bigSum}}</h2>
    

    相关文章

      网友评论

          本文标题:vuex-mapState和mapGetters

          本文链接:https://www.haomeiwen.com/subject/ziqcdrtx.html