vuex中的mapState、mapMutations、mapActions、mapGetters具体用法

vuex的映射语法

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // state就是所有的数据
  state: {
    data: '我是vuex里面的数据',
    data1: 0,
    data2: 1
  },
  mutations: {
    changeData (state, type) {
      state.data = type
    }
  },
  actions:  {
    asyncChangeData (context, type) {
      // context就是与 store 实例具有相同方法和属性的 对象
      setTimeout(() => {
        context.commit('changeData', type)
      }, 2000)
    }
  },
  getters: {
    data4 (state, type) {
      return state.data.split('').reverse().join('')
    }
  }
})

export default store

comA.vue组件

• state (mapState)

之前的写法

computed: {
    // 获取state中三个值
   data () {
     return this.$store.state.data
   },
   data1 () {
     return this.$store.state.data1
   },
   data2 () {
     return this.$store.state.data2
   }

使用mapState

import { mapState } from 'vuex'

computed: {
	// 第一种书写形式：想用哪一个数据，直接使用 ...mapState 映射出哪一个数据就好
	...mapState(['data2', 'data1', 'data'])
	// 第二种书写形式：以对象的形式映射进来，可以在自己的组件中起一个别名，template页面可直接使用 a 进行渲染
  	...mapState({
  		a: 'data2',
  		data1: 'data1'
  	})
}

// 第三种书写形式：直接把整个 mapState 给到了 computed。不能再用计算属性去做别的事情了
computed: mapState(['data1', 'data2', 'data']),

// 第四种书写形式：不能再用计算属性去做别的事情了
computed: mapState({
    data: 'data',
    data1: 'data1',
    a: 'data2'
}),

//总结：
 computed: {
      ...mapState(['属性名称', '属性名称', '...'])
    }
 computed: {
      ...mapState({
        在自己组件中使用的名称: 'state 中的数据名称'
      })
    }
 computed: mapState(['属性名称', '属性名称', '...'])
 computed: mapState({
        在自己组件中使用的名称: 'state 中的数据名称'
      })

• getters （mapGetters）

之前的写法

computed: {
    data () {
      // 获取到的是反转后的字符串
      return this.$store.getters.data4
    },

现在的写法

//和 映射 state 的区别，就是把 mapState 换成  mapGetters
import { mapGetters } from 'vuex'
computed: {
    // 也是四种方式，和 mapState 一样
    // 第一种
    ...mapGetters(['data4'])
    // 第二种 
    ...mapGetters({
      a: 'data4'
    })
  }
// 第三种 直接把整个 mapState 给到了 computed
computed: mapGetters(['data4']),

// 第四种
computed: mapGetters({
    a: 'data4'
}),

• mutations （mapMutations）

原来的写法：

<button @click="changeData">改变 state 中的数据</button>

methods: {
	changeData () {
	   this.$store.commit('changeData', this.msg)
	}
}

现在的写法：

import { mapMutations } from 'vuex'
// 第一种方式
<button @click="changeData2">改变 state 中的数据</button>

methods: {
	// mutations 映射在 methods 里面
    // 在 methods 的别的方法里面可以直接 this.函数名称来调用，就等价于 commit 在提交它
	...mapMutations(['changeData']),
	changeData2 () {
    	this.changeData(this.msg)
    }
}

// 可以简写成 直接把参数绑定在事件名称的后面
<button @click="changeData(msg)">改变 state 中的数据</button>

methods: {
	...mapMutations(['changeData'])
}

// 第二种方式
<button @click="abc(msg)">改变 state 中的数据</button>

...mapMutations({
    abc: 'changeData'
}),


// 映射进来以后，如果你做得事件处理函数里面只有一个事情，可以直接把他绑定在事件名称的后面，也就是 上面的简写
// 什么叫不只有一件事，比如在this.changeData(this.msg)上面加一个输出console.log('111') 就算是两件事，就不能使用简写
// 总结
methods: {
    ...mapMutations(['方法名称', '方法名称', '...'])
  }
  
methods: {
    ...mapMutations({
      在当前组件中使用的名称: 'mutations 中的名称'
    })
  }

• actions （mapActions）

<button @click="changeData">改变 state 中的数据</button>
changeData () {
    this.$store.dispatch('asyncChangeData', this.msg)
},

现在的写法：

import { mapActions } from 'vuex'
// 第一种方式
<button @click="changeData">改变 state 中的数据</button>
methods: {
	...mapActions(['asyncChangeData'])
	changeData () {
    	this.asyncChangeData(this.msg)
    },
}
// 或者直接把参数绑定在事件名后面
<button @click="asyncChangeData(msg)">改变 state 中的数据</button>
methods: {
	...mapActions(['asyncChangeData'])
}

// 第二种方式
<button @click="abc(msg)">改变 state 中的数据</button>
methods: {
	...mapActions({
	    abc: 'asyncChangeData'
	}),
}

总结：

getters （和 映射 state 的区别，就是把 mapState 换成  mapGetters）
actions （和映射 mutations 的区别就是把 mapMutations 换成 mapActions）