求和案例vuex版

 

 

 

 

 

 App.vue

 <div id="app">
      <h1>当前总数为:{{$store.state.nbr}}</h1>
          <select  v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          </select>
      <button @click="add">+</button>
      <button @click="subtract">-</button>
      <button @click="odd">为奇数再加</button>
      <button @click="item">等一等再加</button>
    <!-- <router-view/> -->
  </div>

 

    data(){
            return{
                n:1,
            }
        },
        methods:{
            add(){
　　　　　　　　//调用vuex文件的名字叫做add的事件
            this.$store.dispatch('add',this.n)
            },
            subtract(){
            this.$store.dispatch('subtract',this.n)
            },
            odd(){
            this.$store.dispatch('odd',this.n)
            },
            item(){
            this.$store.dispatch('item',this.n)
            }
        },

 

store.js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
// 用于存储数据
state: {
nbr:0,//当前的和
},
// 用于操作数据
mutations: {
// 加
add(state,value){
state.nbr +=value
},
// 减
subtract(state,value){
state.nbr -=value
},
// 是奇数再加
odd(state,value){
if (state.nbr % 2 ==1) {
state.nbr += value
}
},
// 等一等再加
item(state,value){
setTimeout(()=>{
state.nbr += value
// console.log(this.nbr);
// // 时间间隔
},1000)
},
},
// 用于响应组件中的动作
actions: {
add (context,value){
//context.commit('名字不是固定的可以和主页面的名字不一样',value)
context.commit('add',value)
},
subtract (context,value){
context.commit('subtract',value)
},
odd(context,value){
context.commit('odd',value)
},
item(context,value){
context.commit('item',value)
}
}
})