Vuex中的getter和mutation的区别详解

更新时间：2024年12月02日 09:47:32 作者：JJCTO袁龙

在现代前端开发中,状态管理是一个不可忽视的话题,而Vuex作为Vue.js的官方状态管理库,在大型应用中扮演着至关重要的角色,当我们使用Vuex进行状态管理时,getter和mutation是两个重要的概念,在本文中,我们将详细探讨getter和mutation的区别,需要的朋友可以参考下

引言

在现代前端开发中，状态管理是一个不可忽视的话题，而Vuex作为Vue.js的官方状态管理库，在大型应用中扮演着至关重要的角色。当我们使用Vuex进行状态管理时，getter和mutation是两个重要的概念。虽然它们都是用来处理状态的，但是它们的功能和使用场景却大相径庭。在本文中，我们将详细探讨getter和mutation的区别，并通过示例代码帮助理解。

1. 何为Mutation？

Mutation是Vuex中用于更改状态的方法。它不能是异步的，因此所有的状态修改都需要在mutation中以同步的方式完成。Mutation的作用是负责维护状态的一致性。在Vuex中，每个mutation都有一个字符串类型的事件类型和一个回调函数，该回调函数会接受当前的状态和负载（payload）作为参数。

1.1 Mutation 示例代码

我们以一个简单的计数器示例来说明mutation的使用。首先，我们来创建Vuex的store并定义一个mutation。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    setCount(state, payload) {
      state.count = payload;
    }
  }
});

在这个示例中，我们有一个count状态，并定义了三个mutations：increment、decrement和setCount。这三个方法都是用来修改状态的。你可以通过store.commit方法来调用这些mutations。

1.2 调用Mutation

我们可以在组件中调用mutation，如下所示：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="reset">Set Count to 10</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    },
    reset() {
      this.$store.commit('setCount', 10);
    }
  }
};
</script>

在这个组件中，我们通过this.$store.commit调用定义好的mutations，来增加、减少或重置计数。

2. 何为Getter？

Getter是Vuex提供的用于获取状态的计算属性。它们的功能有点类似于Vue的计算属性，它们可以基于store中的状态计算出一些派生状态。Getter不仅可以读取状态，还可以使用输入参数并返回加工后的状态值。

2.1 Getter 示例代码

在我们的计数器示例中，我们可以添加一个getter来获取当前计数的平方值。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    setCount(state, payload) {
      state.count = payload;
    }
  },
  getters: {
    squareCount(state) {
      return state.count * state.count;
    }
  }
});

在这个示例中，我们定义了一个gettersquareCount，它返回count状态的平方值。

2.2 使用Getter

在组件中，我们可以像使用计算属性一样使用getter：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Square Count: {{ squareCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="reset">Set Count to 10</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    squareCount() {
      return this.$store.getters.squareCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    },
    reset() {
      this.$store.commit('setCount', 10);
    }
  }
};
</script>

在这个组件中，我们通过this.$store.getters.squareCount获取到当前计数的平方值并展示在视图中。

3. Getter与Mutation的主要区别

3.1 功能不同

Mutation: 用于更改状态，必须是同步的，专注于更新store中的数据。
Getter: 用于获取状态的派生值，可以基于state生成新值，也可以接受参数，通常用于对状态的计算和过滤操作。

3.2 使用方式不同

Mutation: 使用store.commit来调用。
Getter: 使用store.getters来获取。

3.3 同步与异步

Mutation: 必须是同步，所有状态变化都要在Mutation中完成，上层组件的状态反应也是同步的。
Getter: 可以从状态中计算出派生状态，通常是通过对状态值的运算得出。

3.4 使用场景不同

Mutation: 用于响应用户的操作，例如点击按钮后增加计数，需要更改状态。
Getter: 用于获取状态的计算结果，例如显示某个状态的平方、和或其他派生数据。

结论

在Vuex中，有效地区分getter和mutation是使用状态管理的基础。在复杂的应用中，准确地管理状态与数据流至关重要。我们通过例子理解了getter和mutation的定义、用法以及它们之间的核心区别。在日常开发中，务必注意这两者的功能划分，以保持代码的整洁与可维护性。

以上就是Vuex中的getter和mutation的区别详解的详细内容，更多关于Vuex getter和mutation区别的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue2 中使用 render 函数编写组件的方式
vue提供了声明式编写UI的方式,即vue提供了对DOM进行描述的方式,有两种描述DOM的方式即模板和render 函数,本文通过示例代码介绍vue2 中使用 render 函数编写组件的方式,感兴趣的朋友跟随小编一起看看吧
2024-06-06
Vue.js中this如何取到data和method里的属性详解
methods属性是一个对象,通常我们会在这个对象中定义很多的方法,下面这篇文章主要给大家介绍了关于Vue.js中this如何取到data和method里的属性,需要的朋友可以参考下
2022-12-12
Vue3+Ts+Vite项目websoket封装使用方式
文章介绍了如何封装WebSocket并进行页面使用,包括安装npm、创建websocket.ts文件、配置请求地址、全局类型声明以及在页面中引用和注册
2025-10-10
如何在vue3中优雅的使用jsx/tsx详解
看了一些 Vue3 的组件库源码,发现无一例外都使用的jsx/tsx来实现,而且实现方式也各不相同,下面这篇文章主要给大家介绍了关于如何在vue3中优雅的使用jsx/tsx的相关资料,需要的朋友可以参考下
2022-10-10
Vue github用户搜索案例分享
这篇文章主要介绍了Vue github用户搜索案例分享，文章基于Vue的相关资料展开对主题的详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04
vue2创建高复用组件的方法示例
Vue2中的高复用组件通常是指那些设计得足够通用,并能多次在项目中重复使用的组件,本文给大家详细介绍了vue2创建高复用组件的方法示例,并通过代码示例讲解的非常详细,需要的朋友可以参考下
2024-07-07
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。这篇文章给大家带来了Vue.js 使用 Vee-validate 实现表单校验的相关知识，感兴趣的朋友一起看看吧
2019-04-04
vue使用element-plus依赖实现表格增加的示例代码
这篇文章主要为大家详细介绍了vue使用element-plus依赖实现表格增加,文中示例代码讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
2023-12-12
Vue2.2.0+新特性整理及注意事项
本文是小编精心给大家收藏整理的关于Vue2.2.0+新特性,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-08-08
Vue Element前端应用开发之常规的JS处理函数
在我们使用Vue Element处理界面的时候，往往碰到需要利用JS集合处理的各种方法，如Filter、Map、reduce等方法，也可以涉及到一些对象属性赋值等常规的处理或者递归的处理方法，本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景，供参考学习。
2021-05-05