...mapState 和 ...mapMutations 通俗解析运用

1.首先要知道在vuex里面，state里面是存放数据的（类似于vue里面的data），mutations里面存放的是各种函数方法，用来改变state里面的数据的方法。
比如：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        leftFocus : '',
        hasBg : '',

        loadingNum : 0,
    },
    mutations: {
        chooseLeft: (state,thisActive) => state.leftFocus = thisActive,
        updateBg: (state,hasBg) => state.hasBg = hasBg,

        addLoading : (state) => state.loadingNum += 1,
        subLoading : (state) => state.loadingNum = state.loadingNum > 0?state.loadingNum-1:0,
    }
});

2.state里面的数据在使用的时候，一般是挂在computed里面的，因为如果你挂在data上面，只会赋值一次，不会跟着vuex里面的变化而同步变化，当然也可以通过watch $store去解决这个问题，如下：

computed: {
    hasBg(){
        return this.$store.state.hasBg
    }
}

watch : {
    '$store.state.hasBg' : {
        handler(newVal,oldVal){
            console.log(newVal)
        }
    }
}

3.接着再说mapState，作用就是可以在computed里面少写一些代码，使用如下：

import { mapState } from 'vuex'
......
computed : mapState({
    //vuex里的数据，两种写法：
    leftFocus : 'leftFocus',
    hasBg : (state) => state.hasBg,
    ......
    //这里是普通放在computed里面的函数
    fn1(){ return ......},
})

4.然后是…mapState，这个就是…的用法，使用之后变得更加方便：

import { mapState } from 'vuex'
......
computed : {
    ...mapState({
        leftFocus:'leftFocus',
        loadingNum:'loadingNum',
        hasBg:'hasBg'
    }),
    fn1(){ return ......},
}

mapState里面或者直接写成：

...mapState([
    'leftFocus',
    'loadingNum',
    'hasBg'
])

```css

ps:注意里面都有引号包着

```css
import {mapMutations} from 'vuex'
......
methods : {
    ...mapMutations([
        'updateBg'
    ]),
}