最简单新手vuex案例（三、actions对象）

 

 

 

 

state文件下的index.js

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

Vue.use(Vuex)

const state = {
    count: 0
}
const mutations = {
    mutationsAddCount(state, n = 0) {
        return (state.count += n)
    },
    mutationsReduceCount(state, n = 0) {
        return (state.count -= n)
    }
}
const actions = {
    actionsAddCount(context, n = 0) {
        return context.commit('mutationsAddCount', n)
    },
    actionsReduceCount(context, n = 0) {
        return context.commit('mutationsReduceCount', n)
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions
})

使用页面的代码

<template>
  <div class="hello">
    <h2>加减法计算器</h2>
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="handleActionsAdd(10)">增加</button>
      <button @click="handleActionsReduce(10)">减少</button>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    handleActionsAdd(n){
      this.$store.dispatch('actionsAddCount',n)
    },
    handleActionsReduce(n){
      this.$store.dispatch('actionsReduceCount',n)
    }
  }
}
</script>