https://next.vuex.vuejs.org/zh/guide/state.html#mapstate-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0

https://next.vuex.vuejs.org/zh/guide/getters.html#mapgetters-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0

mapState和mapGetters都是用于简化开发,提高效率的工具

mapState和mapGetters学习_ide

 

 用法如下:

mapState和mapGetters学习_vuex_02

 

 key(he、xuexiao、xueke)代表了函数名,value代表state中的对象。

mapState和mapGetters学习_vue_03

 

注意不要把...mapState放到methods中,这会导致vue将里面的识别成方法,在模板引擎中使用的时候也要加上括号如:{{he}}

mapGetters同理。

数组写法(名字要和state中的对象名称一致,也能达到同样效果):

mapState和mapGetters学习_html_04

 

 

为什么都放到computed里面?

官方文档解释:由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

https://next.vuex.vuejs.org/zh/guide/state.html

https://segmentfault.com/q/1010000009696383