mapState的使用

如果要获取store里面的state的city属性。首先来看看没有使用mapState的情况,

{{this.$store.state.city}}

再来看看使用mapState后

{{this.city}}

那么为什么会这样呢？先来看看官方的定义：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

首先什么是状态？即state，state又是用来存储一些数据的，所以不难理解。

看代码

import {mapState} from "vuex"
// 使用mapState,此时，city已经被映射了，所以可以直接使用this.city去获取属性值
computed:{
    //意思是将vuex中的city数据映射到组件的computed属性里
    ...mapState(["city"])
}

---

还有一种使用方法,意思是将store里面的state里面的city属性映射到computed属性中的currentCity中。即currentCity代表了$store.state.city

computed:{
        ...mapState({
            currentCity:"city"
        })
    }