最简单新手vuex案例（二、mutations对象）

功能：每次+10或-10

 

 

 

 

 

state文件中的index.js

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

Vue.use(Vuex)

const state = {
    num: 0
}

const mutations = {
    mutationsAddCount(state, n = 0) {
        return (state.num += n)
    },
    mutationsReduceCount(state, n = 0) {
        return (state.num -= n)
    }
}

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

使用页面中的代码

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

<script>
export default {
  methods:{
    handleAddClick(n){
      this.$store.commit('mutationsAddCount',n)
    },
    handleReduceClick(n){
      this.$store.commit('mutationsReduceCount',n)
    }
  }
}
</script>