<template> <div> <h3>{{$store.state.count}}</h3> <div> <button @click="handleAddClick(10)">增加</button> <button @click="handleReduceClick(10)">减少</button> </div> </div> </template>
methods: { handleAddClick(n){ this.$store.commit('mutationsAddCount',n); }, handleReduceClick(n){ this.$store.commit('mutationsReduceCount',n); } }
来浏览器看一下效果如何！
我们可以看到每当触发事件时，我们都可以在vue开发工具中看到我们触发的mutations方法，以及参数
完美！
接下来就是actions，actions是异步操作
创建actions对象，并且使用
这里我在两个方法中使用了两个不同的参数，一个是context，它是一个和store对象具有相同对象属性的参数。在第二个函数中，我是直接使用了这个对象的commit的方法。
凭大家喜好就行
const actions = { actionsAddCount(context, n = 0) { console.log(context) return context.commit('mutationsAddCount', n) }, actionsReduceCount({ commit }, n = 0) { return commit('mutationsReduceCount', n) } } export default new Vuex.Store({ state, mutations, actions })
在helloWorld.vue中
在methods中，增加两个方法，使用dispath来触发
<div>异步操作</div> <div> <button @click="handleActionsAdd(10)">异步增加</button> <button @click="handleActionsReduce(10)">异步减少</button> </div>
handleActionsAdd(n){ this.$store.dispatch('actionsAddCount',n) }, handleActionsReduce(n){ this.$store.dispatch('actionsReduceCount',n) }
进入浏览器看下效果如何！
最后就是getters
我们一般使用getters来获取我们的state，因为它算是state的一个计算属性
const getters = { getterCount(state, n = 0) { return (state.count += n) } } export default new Vuex.Store({ state, mutations, actions, getters })
<h4>{{count}}</h4>
const getters = { getterCount(state) { return (state.count += 10) } }
getters算是非常简单的了。
到这里，如果全都看懂了，vuex你已经没有压力了。
但是vuex官方给了我们一个更简单的方式来使用vuex， 也就是 {mapState, mapMutations, mapActions, mapGetters}
只要我们把上面基础的搞懂，这些都不在话下，只是方面我们书写罢了。
就这么简单，这里我们用到了es6的扩展运算符。如果不熟悉的同学还是去看看阮一峰大神的《Es6标准入门》这本书，我是看完了，受益匪浅！
<script> import {mapState, mapMutations, mapActions, mapGetters} from 'vuex' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { ...mapMutations({ handleAddClick: 'mutationsAddCount', handleReduceClick: 'mutationsReduceCount' }), ...mapActions({ handleActionsAdd: 'actionsAddCount', handleActionsReduce: 'actionsReduceCount' }) // handleAddClick(n){ // this.$store.commit('mutationsAddCount',n); // }, // handleReduceClick(n){ // this.$store.commit('mutationsReduceCount',n); // }, // handleActionsAdd(n){ // this.$store.dispatch('actionsAddCount',n) // }, // handleActionsReduce(n){ // this.$store.dispatch('actionsReduceCount',n) // } }, computed: { count(){ return this.$store.getters.getterCount } } } </script>
同理，getters和 state也可以使用 mapState，mapGetters
如果你更懒的话，我们可以使用数组，而非对象，或者es6里面的对象简写方式
就像这种
