Vuex-核心概念-State 学习笔记

官方参考 进行了一些项目的实操, 当刚在代码中接触到了  mapState()   ...mapState 这样的代码时,一脸茫然,然后开始学习.

版本1:直接在模板中访问Vuex中的数据,见下面行4, 其中 1).srcsotreindex.js 中new Vuex 对象 2).在 main.js 中注册这个Vuex对象,需调用 Vue.use(Vuex)

<div class="title border-topbottom">当前城市</div>
<div class="button-list">
  <div class="button-wrapper">
    <div class="button">{{this.$store.state.city}}</div>
  </div>
</div>

版本2:使用Computer 计算属性解决

<div class="button-wrapper">
 <div class="button">{{ currentCity }}</div>
</div>

computed: {
 currentCity () {
  return this.$store.state.city
 }
},

版本3.1: mapState 辅助函数，帮助我们快速生成计算属性，因为这里只有1个属性，所以简便性体会不是那么明显

 mapState()  函数属于 Vuex 组件绑定的辅助函数, 我们可以通过 API 查到它的出处, 当import Vuex之后, 在项目代码中就可以使用了,当然需要import它

import { mapState } from 'vuex'

computed: mapState({
 currentCity: state => state.city
}),

注意书写语法,直接将mapState函数赋值给computed计算属性。mapState Vuex原生API 函数, 帮助我们快速生成计算属性,感觉像是语法糖衣

官网参考

版本3.2

<div class="button-wrapper">
 <div class="button">{{ currentCityAlias }}</div>
</div>

computed: mapState({
 currentCityAlias: 'city' //传一个字符串'city',等价版本3.1中的语法
}),

除了给mapState对象传入对象作为参数,还可以传入一个数组,作用参考官网

为什么mapState之前需要... 这样的展开运算符呢?
版本3中的都是将mapState函数直接赋值给计算属性computed,因为mapState函数返回的是一个对象,如果将mapState函数与局部计算属性混合使用呢? 即将mapState函数返回值和其它成员"合成"一个对象赋值给computed

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

 再看一个例子

import { mapState } from 'Vuex'
computed: {
  ...mapState(['city'])//map成名字叫city的计算属性
}