1、State

使用

this.$store.state.count

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

 

 当然，这里推荐用 computed 来接收，这样 state 被修改时，相对应的组件可以动态的修改值。

mapState 辅助函数

mapState是什么?

  表面意思:mapState是state的辅助函数.这么说可能很难理解

  抽象形容:mapState是state的语法糖,这么说可能你还想骂我,因为你根本不了解什么叫做语法糖,事实上我说的语法糖有自己的定义,什么是语法糖?我对语法糖的理解就是,用之前觉得,我明明已经对一种操作很熟练了,并且这种操作也不存在什么问题,为什么要用所谓的"更好的操作",用了一段时间后,真香!

实际作用:当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

  在使用mapState之前,要导入这个辅助函数.

import { mapState } from 'vuex'

 

computed: mapState({
    count: state => state.count,// 第一种引入方法

    count: 'count'// 第二种方式传字符串，'count'等同于state => state.count
  })

computed: mapState([// 第三种映射
    'count'
  ])

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符 (opens new window)，我们可以极大地简化写法：

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