vuex实现求和案例

求和案例（纯vue版）

<template>
  <div class="count">
    <h2>当前求和为{{sum}}</h2>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">和为奇数时再加</button>
    <button @click="incrementWait"> 等一等再加</button>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data(){
    return {
      num:1,
      sum:0
    }
  },
  methods: {
    increment(){
      this.sum += this.num;
    },
    decrement(){  
      this.sum -= this.num;
    },
    incrementOdd(){
      if(this.sum % 2){
        this.sum += this.num;
      }
    },
    incrementWait(){
      setTimeout(() => {
        this.sum += this.num;
      },500)

    }
  },
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>

求和案例（vuex版）

vuex工作原理，详见下图，想了解更多可以访问官网。

actions，用来响应组件dispatch过来的动作。
mutations，用来操作数据。
state，用来存储数据。

$store.dispatch(actionType,value)，将触发actions中的action函数。
$store.commit(mutationType,value)，将触发mutations中的mutation函数。

action函数，接收形参：context和value
mutation函数，接收形参：state和value

先dispatch再commit

代码主要涉及以下两个文件，

1. store/index.js
2. Count.vue

store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
    sum:0
};

const actions = {
    jia(context,value){
        context.commit("JIA",value);
    },
    jian(context,value){
        context.commit("JIAN",value);
    },
    jiaOdd(context,value){
        if(context.state.sum  % 2){
            context.commit("JIA",value);
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit("JIA",value);
        },500)
    }
};

const mutations = {
    JIA(state,value){
        state.sum += value;
    },
    JIAN(state,value){
        state.sum -= value;
    }
};


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

Count.vue

<template>
  <div class="count">
    <h2>当前求和为{{$store.state.sum}}</h2>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">和为奇数时再加</button>
    <button @click="incrementWait"> 等一等再加</button>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  methods: {
    increment(){
      this.$store.dispatch("jia",this.num);
    },
    decrement(){  
      this.$store.dispatch("jian",this.num);
    },
    incrementOdd(){
      this.$store.dispatch("jiaOdd",this.num);
    },
    incrementWait(){
      this.$store.dispatch("jiaWait",this.num);
    }
  },
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>

直接commit

代码主要涉及以下两个文件，

1. store/index.js
2. Count.vue

store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
    sum:0
};

const actions = {
    jiaOdd(context,value){
        if(context.state.sum  % 2){
            context.commit("JIA",value);
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit("JIA",value);
        },500)
    }
};

const mutations = {
    JIA(state,value){
        state.sum += value;
    },
    JIAN(state,value){
        state.sum -= value;
    }
};

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

Count.vue

<template>
  <div class="count">
    <h2>当前求和为{{$store.state.sum}}</h2>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">和为奇数时再加</button>
    <button @click="incrementWait"> 等一等再加</button>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data(){
    return {
      num:1
    }
  },
  methods: {
    increment(){
      this.$store.commit("JIA",this.num);
    },
    decrement(){  
      this.$store.commit("JIAN",this.num);
    },
    incrementOdd(){
      this.$store.dispatch("jiaOdd",this.num);
    },
    incrementWait(){
      this.$store.dispatch("jiaWait",this.num);
    }
  },
}
</script>

<style scoped>
  button{
    margin-left: 5px;
  }
</style>