vuex辅助函数

一、mapState

Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象。为什么它会是核心呢？因为我们调用这个构造函数创建store 对象的时候，给它传递参数中包装了state, mutation , action 等核心内容。

const store =new Vuex.Store({

  state: { count: 0  },

  mutations: {

    increment (state) {

      state.count++    }

  }

})

Vuex 的思想是 当我们在页面上点击一个按钮，它会处发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 立即会改变state,  state 改变以后,我们的页面会state 获取数据，页面发生了变化。 Store 对象，包含了我们谈到的所有内容，action, state, mutation，所以是核心了。

store 对象注入到根实例后，在所有的子组件中，就可以用this.$store 来指向store 对象，获取state。在子组件中，computed 属性是根据它的依赖自动更新的。所以只要store中的state发生变化，它就会自动变化。

通过computed属性可以获取到状态值，但是组件中每一个属性（如：count）都是函数,如果有10个，那么就要写10个函数，且重复写10遍return this.$store.state，不是很方便。vue 提供了 mapState 函数，它把state 直接映射到我们的组件中。

import {mapState} from "vuex";

computed: {

            localComputed () {

                returnthis.count + 10;

            },

            ...mapState({count: "count" })

}

mapState通过扩展运算符将store.state.orderList 映射this.orderList  这个this 很重要，这个映射直接映射到当前Vue的this对象上。

所以通过this都能将这些对象点出来，同理，mapActions, mapMutations都是一样的道理。