0

image.png

有没有能详细说一下原理的呢?

林小木 143
12月5日提问
2 个回答
0

就是依赖state的一个计算属性,count这个计算属性返回后面箭头函数的返回值。

就如同:
count () {
return this.$store.state.count
}

0

一步步分析.

  1. ...是展开运算符.它在一个对象computed中,可以把另一个对象的值复制到computed中.
  2. 因为步骤一,那么mapState调用必然返回一个对象.这个对象的各属性实际上就是上面这个回答里提到的.
  3. 也就是说,mapState做的工作本质上就是把vuex里的数据映射为本地组件的值.
  4. 再根据mapState的参数推测它做的事情.

    1. 它可以接受一个字符串数组,行为是将vuex里同名的属性映射到本地组件
    2. 接受一个对象,值为字符串,行为是将vuex里与值同名的属性映射为本地一个与key相同的属性.
    3. 接受一个对象,值为匿名函数,注入vuex里的state,随便你取值

根据这些行为和最终结果,很容易就能推出它的实现.无非就是区分参数,构建一个值为返回state内部属性的对象而已.

撰写答案

推广链接