Vue.js入门系列（二十六）：深入理解Vuex的Getters与State映射、Actions与Mutations映射及多组件数据共享

用户8589624

发布于 2025-11-14 09:16:46

1150

文章被收录于专栏：nginxnginx

Vue.js入门系列（二十六）：深入理解Vuex的Getters与State映射、Actions与Mutations映射及多组件数据共享

引言

在前一篇文章中，我们已经介绍了Vuex的基础概念和工作原理，并通过求和案例演示了如何在Vue应用中集成Vuex。本文将进一步深入探讨Vuex的getters配置项，以及mapState、mapGetters、mapActions和mapMutations这四个辅助函数的使用方法，并通过实例展示如何在多组件中共享数据，从而更好地理解Vuex的强大功能。

一、Vuex中的Getters配置项

1.1 什么是Getters？

Getters 是 Vuex 中的计算属性，它用于从 state 中派生出一些状态，并且支持缓存。Getters 在应用中非常有用，它可以基于 state 中的原始数据生成新的数据形式，避免了在组件中重复书写计算逻辑。

1.2 定义和使用Getters

我们可以在 store 中定义 Getters，并通过组件来访问这些 Getters。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue.js', done: true },
      { id: 2, text: 'Learn Vuex', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    }
  }
});

在这个示例中，我们定义了两个 Getters：doneTodos 用于筛选已完成的任务，doneTodosCount 用于计算已完成任务的数量。

1.3 在组件中使用Getters

可以通过计算属性或直接访问 store.getters 来使用 Getters。

computed: {
  doneTodos() {
    return this.$store.getters.doneTodos;
  },
  doneTodosCount() {
    return this.$store.getters.doneTodosCount;
  }
}

通过将 Getters 作为计算属性引入到组件中，我们可以在模板中轻松使用这些派生状态。

二、`mapState`与`mapGetters`

2.1 `mapState`的作用

mapState 是 Vuex 提供的辅助函数，用于将 state 映射为组件的计算属性。这简化了在组件中访问 state 的代码量。

2.2 使用`mapState`

假设我们有如下的 state：

const store = new Vuex.Store({
  state: {
    count: 0,
    user: {
      name: 'John Doe',
      age: 30
    }
  }
});

我们可以在组件中使用 mapState 来映射 state：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count', 'user'])
  }
};

这样，我们就可以直接在模板中使用 count 和 user 了，而无需每次都使用 this.store.state.count 或 this.store.state.user。

2.3 `mapGetters`的作用

mapGetters 与 mapState 类似，它用于将 Vuex 的 Getters 映射为组件的计算属性。

2.4 使用`mapGetters`

假设我们有如下的 Getters：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue.js', done: true },
      { id: 2, text: 'Learn Vuex', done: false }
    ]
  },
  getters: {
    doneTodos: state => state.todos.filter(todo => todo.done),
    doneTodosCount: (state, getters) => getters.doneTodos.length
  }
});

我们可以使用 mapGetters 来映射这些 Getters：

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['doneTodos', 'doneTodosCount'])
  }
};

这样我们就可以在模板中轻松访问 doneTodos 和 doneTodosCount 了。

三、`mapActions`与`mapMutations`

3.1 `mapActions`的作用

mapActions 是用于将 Vuex 的 Actions 映射为组件的方法，这样我们可以在组件中直接调用这些 Actions，而不必显式地通过 this.$store.dispatch。

3.2 使用`mapActions`

假设我们有如下的 Actions：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

我们可以使用 mapActions 来映射这些 Actions：

import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['increment'])
  }
};

这样，我们可以直接调用 this.increment() 来触发 increment Action。

3.3 `mapMutations`的作用

mapMutations 与 mapActions 类似，它用于将 Vuex 的 Mutations 映射为组件的方法。

3.4 使用`mapMutations`

我们可以将 Mutations 映射为组件的方法：

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['increment'])
  }
};

这样我们可以直接调用 this.increment() 来触发 increment Mutation。

四、多组件共享数据

4.1 为什么需要共享数据？

在大型 Vue.js 应用中，通常有多个组件需要共享和同步同一份数据。使用 Vuex，可以轻松地将这些数据集中管理并共享给不同的组件。

4.2 实现多组件共享数据

假设我们有两个组件：ComponentA 和 ComponentB，它们都需要访问和更新同一个 count 状态。

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    }
  },
  getters: {
    count: state => state.count
  }
});

在 ComponentA 中：

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};

在 ComponentB 中：

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['decrement'])
  }
};

通过这种方式，ComponentA 和 ComponentB 可以共享和同步 count 状态，无论哪个组件修改了 count，另一个组件都会即时地感知到变化。

4.3 使用模块化Vuex Store

在复杂应用中，Vuex Store 可以按模块划分，每个模块管理自己的一部分状态、mutations、actions 和 getters。这种模块化结构使得 Vuex Store 更加易于管理和维护。

const moduleA = {
  state: () => ({ count: 0 }),
  mutations: { increment(state) { state.count++; } },
  actions: { increment({ commit }) { commit('increment'); } },
  getters: { count: state => state.count }
};

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
});

在组件中使用时可以通过模块路径来访问：

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('a', ['count'])
  },
  methods: {
    ...mapActions('a', ['increment'])
  }
};

五、总结

通过本文的学习，你应该掌握了以下关键点：

Getters 配置项：理解了 Getters 的作用及其在 Vuex 中的使用方式，用于派生状态。
mapState 与 mapGetters：学会了如何将 Vuex 的 state 和 getters 映射为组件的计算属性，简化了代码。
mapActions 与 mapMutations：理解了如何将 Vuex 的 Actions 和 Mutations 映射为组件的方法，便于调用和管理状态变化。
多组件共享数据：通过 Vuex，多个组件可以轻松共享和同步同一份数据，从而实现复杂应用中的数据管理。

通过这些技术，Vuex 使得 Vue.js 应用的状态管理变得更加简单和高效。在接下来的博客中，我们将继续探索 Vuex 的高级特性和更多实际应用场景。如果你有任何疑问或需要进一步讨论，欢迎在评论区留言。感谢你的阅读，期待在下一篇博客中继续与大家分享更多 Vue.js 和 Vuex 的开发技巧与经验！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-11-12，如有侵权请联系 cloudcommunity@tencent.com 删除

入门

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度