VUEX mapActions 和 mapMutations

 

不使用mapActions 和 mapMutations的代码

要用的地方字体放大了

<template>
  <div id="app">
         <h1>当前总数为:{{nbr}}</h1>
         <h2>放大十倍总数为:{{bigSum}}</h2>
         <h3>我在{{school}}我是{{myname}}</h3>
          <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>
</template>
<script>
    import {mapState,mapGetters} from 'vuex';
    export default{
        data(){
            return{
                n:1,
            }
        },
        computed:{
             ...mapState(['nbr','school','myname']),
             // 数组写法 从getters里读取对象
             ...mapGetters(['bigSum'])                  
        },
          methods:{
            add(){
                    // 调用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)
            }
        },
    }
</script>
<style lang="less" scoped>
    button{
        margin-left: 5px;
    }
</style>

mapMutations:

使用后：给事件加上参数n

<template>
  <div id="app">
         <h1>当前总数为:{{nbr}}</h1>
         <h2>放大十倍总数为:{{bigSum}}</h2>
         <h3>我在{{school}}我是{{myname}}</h3>
          <select  v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          </select>
      <button @click="add(n)">+</button>
      <button @click="subtract(n)">-</button>
      <button @click="odd">为奇数再加</button>
      <button @click="item">等一等再加</button>
    <!-- <router-view/> -->
  </div>
</template>
<script>
    import {mapState,mapGetters,mapMutations} from 'vuex';
    
    export default{
        data(){
            return{
                n:1,
            }
        },
        computed:{
              ...mapState(['nbr','school','myname']),
             // 数组写法 从getters里读取对象
             ...mapGetters(['bigSum'])
             
        },
         methods:{
　　　　　　　　//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
           ...mapMutations({add:'add',subtract:'subtract'}),
            odd(){
                this.$store.dispatch('odd',this.n)
            },
            item(){
            this.$store.dispatch('item',this.n)
            }
        },
    }
</script>
<style lang="less" scoped>
    button{
        margin-left: 5px;
    }
</style>

mapActions:

记得给事件加参数n

 <button @click="add(n)">+</button>
      <button @click="subtract(n)">-</button>
      <button @click="odd(n)">为奇数再加</button>
      <button @click="item(n)">等一等再加</button>

 

    methods:{            
            // odd(){
                
            //     this.$store.dispatch('odd',this.n)
            // },
            // item(){
            // this.$store.dispatch('item',this.n)
            // }
　　　　　　　　　//对象写法
            ...mapActions({odd:'odd',item:'item'}),
　　　　　　　　　　//数组写法
　　　　　　　　...mapActions({'odd','item'}),

        },

 

 

 

store.js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存储数据
  state: {
      nbr:0,//当前的和
      school:'京海学校',
      myname:'张三'
  },
  // 用于操作数据
  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)
      }
  },
  getters:{
      bigSum(state){
          return state.nbr*10
      }
  }
})

 

mapActions