vuex深入学习 --- State

vuex深入学习 — State

state在一个应用中是唯一的,也就是只有一个store实例
如何使用:
①直接获取state this.$store.state.***
②动态获取state 在组件中的computed(计算属性)中引入

    computed: {
      count () {
        // 当state发生变化时都会返回状态
        return this.$store.state.count
      }
    },
    watch: {
      count: function (newValue, oldValue) {
        // 监听count 发生变化执行操作
      }
    }

问题: 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余
解决: mapState 辅助函数,它会帮助我们生成计算属性

  //  在单独构建的版本中辅助函数为 Vuex.mapState
  import {mapState} from 'vuex'

  export default ({
    computed: {
      Num () { /* */ },
      // mapState 函数返回的是一个对象
      // 使用扩展运算符将此对象混入到外部对象中
      ...mapState({
        // 箭头函数可使代码更简洁
        count: state => state.count,

        // 传字符串count等同于 'count: state => state.count'
        countAlias: 'count',

        // 当映射的计算属性的名称与 state 的子节点名称相同时,
        // 可以直接给 mapState 传一个字符串数组。
        // 映射 this.count 为 this.$store.state.count
        'count',

        // 如果需要获取组件内的数据, 必须使用常规函数
        countPlusLocalState (state) {
          return state.count + this.local
        }
      })
    }
  })