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

再来看看使用mapState后
`{{this.city}}

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

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

// store.js

/*
vuex的核心管理对象模块:store
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 状态对象
const state = { // 初始化状态 这里放置的状态可以被多个组件共享
  count: 1,
  name: 'daming'
}
const mutations = {}
const action = {}
const getters = {}

export default new Vuex.Store({
  state, // 状态
  mutations, // 包含多个更新state函数的对象
  actions, // 包含多个队形事件回调函数的对象
  getters // 包含多个getter计算属性函数的对象
})
2.代码中使用
import {mapState} from "vuex"
// 使用mapState,此时，city已经被映射了，所以可以直接使用this.city去获取属性值
computed:{
    //意思是将vuex中的city数据映射到组件的computed属性里
    ...mapState(["city"])
}

1.html中直接使用city
2.js中使用this.city
3.第三种使用方式

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

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

1.使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。
2.如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
3.由于 Vuex 的状态存储是响应式的，所以可以使用计算属性来获得某个状态
4.当状态改变时，都会重新求取计算属性，并且触发更新相关联的 DOM
5.通过下面的计算属性，就可以在当前组件中访问到count,name,nameAlias等了 在模板中我们通过大括号符号打印出来