1.首先要知道在vuex里面续扔，state里面是存放數(shù)據(jù)的（類似于vue里面的data）攻臀，mutations里面存放的是各種函數(shù)方法，用來改變state里面的數(shù)據(jù)的方法纱昧。
比如：

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里面的數(shù)據(jù)在使用的時候刨啸，一般是掛在computed里面的，因為如果你掛在data上面识脆，只會賦值一次设联，不會跟著vuex里面的變化而同步變化，當(dāng)然也可以通過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里的數(shù)據(jù)悉稠，兩種寫法：
    leftFocus : 'leftFocus',
    hasBg : (state) => state.hasBg,
    ......
    //這里是普通放在computed里面的函數(shù)
    fn1(){ return ......},
})

4.然后是...mapState粘招，這個就是...的用法，使用之后變得更加方便：

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

mapState里面或者直接寫成：

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

ps:注意里面都有引號包著

5.mapMutations 和 mapState 用法一樣偎球，mapMutations是用來存放vuex里面的mutations函數(shù)的洒扎，如下：

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