...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’
])

ps:注意里面都有引号包着
5.mapMutations 和 mapState 用法一样，mapMutations是用来存放vuex里面的mutations函数的，如下：

import {mapMutations} from ‘vuex’
…
methods : {
…mapMutations([
‘updateBg’
]),
}

​