mapActions实例 - Vue

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuex 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/2.3.0/vuex.min.js"></script>
</head>
<body>
<div id="app">

</div>

<script>
// make sure to call Vue.use(Vuex) if using a module system

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
  	increment: state => state.count++,
    decrement: state => state.count--,
	incrementPayload: (state,payload) => state.count += payload.amount,
	incrementObject: (state,payload) => state.count += payload.amount
  },
  actions: {
    increment (context) {
      context.commit('increment')
    },
	//context参数解构，解构成员commit
	incrementDestructuring ({commit}) {
      commit('increment')
    },
	incrementAsync ({ commit }) {
     setTimeout(() => {
      commit('increment')
     }, 1000)
    },
	//以载荷形式分发
	incrementPayload ({commit},payload) {
      commit('incrementPayload',payload)
    },
	//以对象形式分发
	incrementObject ({commit},payload) {
      commit('incrementObject',payload)
    }
  }
})


// 创建一个 Counter 组件
const Counter = {
  template: `<div>
  <p>{{ count }}</p>
  <p>
    <button @click="incrementMutation">+ Mutation</button>
    <button @click="decrement">-</button>
    <button @click="incrementAction">+ Action</button>
    <button @click="incrementActionDestructuring">+ Action by Destructuring</button>
    <button @click="incrementAsync">+ Action Async</button>
    <button @click="incrementPayload">+ Action Payload</button>
    <button @click="incrementObject">+ Action Object</button>
  </p>
</div>`,
  computed: {
    count () {
		return this.$store.state.count
    }
  },
  methods: {
	...Vuex.mapMutations({
	  incrementMutation:'increment',
	  decrement:'decrement',
	}),
	...Vuex.mapActions({
	  incrementAction:'increment',
	  incrementActionDestructuring:'incrementDestructuring',
	  incrementAsync:'incrementAsync',
	}),
	incrementPayload () {
      // 以载荷形式分发
      this.$store.dispatch('incrementPayload', {
        amount: 10
      })
    },
	incrementObject () {
      // 以对象形式分发
      this.$store.dispatch({
        type: 'incrementObject',
        amount: 10
      })
    }
	  
  }
}

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
</script>
</body>
</html>
Email：	2689701946@qq.com
QQ：	2689701946
地址：	广州南沙区