Vuex 之 mapState

最近看了一下vuex，读了很多的博客 总结一下，关于mapState

Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。

在vuex中可以直接存储某个状态 比如

{
   name:’lily’,
   age:’21’,
}

在某个页面调用的时候可以直接调用 即

<h1>{{ this.$store.state.name }} </h1> 
<h1>{{ this.$store.state.age }} </h1>

但是要是想要数据很多的话这样就比较麻烦了
所以。使用。computed 计算属性
比如

Computed:{
   age(){
        return this.$store.state.age;
    },
    name(){
        return this.$store.state.name;
    }
}

在调用的时候就可以是

 <h1>{{name}}:{{age}}</h1>

但是 这样看起来比较麻烦。所以又了mapState这个属性
我们可以直接使用

Computed:mapStates([“name”,”age”])

短短几句话 就相当于

Computed:{
   age(){
        return this.$store.state.age;
    },
    name(){
        return this.$store.state.name;
    }
}

但是。如果 我还想要其他的属性 ，比如 tel，address。。。
所以。有了一个…mapStates 这个东西。用对象展开符 举个例子

Computed:{
   tel(){
        return this.tel;
    },
    address(){
        return this.address;
    },
    …mapStates([“name”,”age"])
}