秒懂Vue！一分钟get Vuex仓库的map辅助函数诀窍~

使用map函数
在脚手架页面中需要引入,而普通浏览器js仅需引入vuex即可

import {mapState,mapGetters} from 'vuex'

1.mapState和mapGetters写在引入页面computed里

Vue.component('bbb', {
computed: {
...Vuex.mapGetters(['totalPrice']),
...Vuex.mapState(['count', 'nickname', 'gender'])},
template: `<h1>{{count}}--{{nickname}}---{{gender}}---{{totalPrice}}</h1>`
        })

2.mapMutaions和mapActions写在引入页面methods里

Vue.component('aaa', {
methods: {
...Vuex.mapMutations(['addCount'])
},
template: `<button @click="addCount(5)">click</button>` })

3.仓库值配置

new Vue({
el: "#app",
store: new Vuex.Store({
state: {
                    price: 30,
                    count: 11,
                    nickname: "Simba",
                    gender: '男'
                },
                getters: {
                    totalPrice({ price, count }) {
                        return price * count
                    }
                },
                mutations: {
                    addCount(state, data) {
                        state.count += data}}})})