vuex基础之mutations

最新推荐文章于 2024-05-11 16:27:15 发布

RAY_CHEN.

最新推荐文章于 2024-05-11 16:27:15 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/weixin_44707050/article/details/119643683

版权

本文介绍了Vue.js状态管理库Vuex中mutations的使用方法，包括无参数和带参数的mutation，以及两种调用mutation的方式：直接通过`this.$store.commit`和使用`mapMutations`辅助函数。示例代码展示了如何在组件中监听和修改store中的count状态，并通过按钮点击事件触发mutation进行加法操作。

摘要由CSDN通过智能技术生成

1.mutations

可以集中监控数据的变化

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
    countgetter(state){
      return '这是getter后的值' + state.count;
    }
  },
  mutations: {
    add(state) {
      state.count++; //无参数，传入state
    },
    addN(state,step) {
      state.count+=step; //有参数，传入state,再传入step需要传递的参数
    }

  },
  actions: {
  
  },

  modules: {},
});

mutations的两种使用方式


{{this.$store.state.count}}

<button @click="handleadd">+1</button><br /> //点击按钮，count +1
<button @click="handleaddN(2)">+2</button>  //点击按钮 ， count + 2（或者n）


//第一种方式
<script>

export default {
  data() {
    return {};
  },
  computed: {
   
  },
  methods: {
    handleadd() {
      this.$store.commit("add"); //在methods中this.$store.commit即可使用
    },
    handleaddN(n) {
      this.$store.commit("addN", n); //同上，传参，在方法后加个参数即可，此种方法只能传一个值，如果需要传多个值，写成数组或对象的方式传参即可
    },
  
  },
};
</script>

//第二种方式
<script>
import {  mapMutations} from "vuex"; //引入mapMutations
export default {
  data() {
    return {};
  },
  computed: {
 
  },
  methods: {
  
    ...mapMutations(['add','addN']), //在methods中...mapMutations ， 引入方法
    handleaddmap() {
        this.add() //直接调用从mapMutations中引入的方法即可
    },
    handleaddNmap(n) {
        this.addN(n)  //需要传参，在调用方法时传参即可
    },
 
  },
};
</script>