vuex入门(二)

• Mutation用于变更Store中的数据

• 方式1

// 例如在store中写一个操作data的方法add，传入的参数为要操作的数据state
import { createStore } from 'vuex'
export default createStore({
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      state.count++;
    }
  },
  actions: {
  },
  modules: {
  }
})

// 在子组件Addition.vue中调用该方法实现数据变更
<template>
  <div>
    <button @click="btnHandler1">+1</button>
  </div>
</template>

<script>
export default {
  methods: {
    btnHandler1() {
      this.$store.commit('add');
    }
  }
}
</script>

• 传递参数

// 在store中编写方法，第二个参数为要传递的参数
import { createStore } from 'vuex'
export default createStore({
  state: {
    count: 0
  },
  mutations: {
    addN(state, step) {
      state.count += step;
    }
  },
  actions: {
  },
  modules: {
  }
})

// 在子组件Addition中调用该方法并传入参数3，表示每次加3
<script>
export default {
  methods: {
    btnHandler2() {
      this.$store.commit('addN', 3)
    }
  }
}
</script>

• 方式2

// 在store中编写一个操作数据方法
import { createStore } from 'vuex'
export default createStore({
  state: {
    count: 0
  },
  mutations: {
    sub(state) {
      state.count--;
    }
  },
  actions: {
  },
  modules: {
  }
})

// 在子组件中引入mapMutations函数，通过该函数将store中sub方法映射到该子组件
<script>
import { mapMutations } from "vuex";
// 暴露一个对象
export default {
  methods: {
    ...mapMutations(['sub']),
    btnHandler1() {
      this.$store.commit('sub');
    }
  }
};
</script>

• 传递参数

// store中编写方法
import { createStore } from 'vuex'
export default createStore({
  state: {
    count: 0
  },
  mutations: {
    subN(state, step) {
      state.count -= step;
    }
  },
  actions: {
  },
  modules: {
  }
})

// 在子组件中引入mapMutations函数，通过该函数将store中sub方法映射到该子组件，调用该方法，传入参数
<script>
import { mapMutations } from "vuex";
// 暴露一个对象
export default {
  methods: {
    ...mapMutations(['subN']),
    btnHandler2() {
      this.$store.commit('subN', 5);
    }
  }
};
</script>