vuex进阶篇：如何高效运用getters进行状态管理？

本文共计685个文字，预计阅读时间需要3分钟。

目录

1.设置getters事件

2.使用调用

3.最终页面示例 + getters的优势

总结紧接上篇，本篇主要讲解Vuex中getters的使用。示例中使用了Vuex的modules，展示了getters在Vue组件中的使用，类似于computed的使用。

getters的优势：- 简化状态获取，提高代码可读性- 缓存结果，提高性能- 可以对状态进行复杂的计算和组合

示例：javascript// store/modules/user.jsexport default { namespaced: true, state: ()=> ({ users: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' } ] }), getters: { getUserById: state=> id=> state.users.find(user=> user.id===id) }}

// store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({ modules: { user }})

// Vue组件中使用computed: { userById() { return this.$store.getters.getUserById(2) }}

总结：Vuex中的getters是用于简化状态获取和计算的工具，类似于Vue组件中的computed属性。通过使用getters，我们可以提高代码的可读性和性能。在本示例中，我们展示了如何使用Vuex的modules和getters，并演示了如何在Vue组件中使用getters。

目录

• 1.设置gettes 事件
• 2.使用调用
• 3.最终页面示例
• getters的优点：
• 总结

紧接上篇，本片主要讲讲vuex 中 getters的使用，示例中使用了vuex的modules，getters的使用与vue组件中computed中使用类似，再学习的过程中，注意举一反三

1.设置gettes 事件

index.js

dict.js

我们在index.js中设置了两个getters事件，在子模块dict.js中设置了两个getters事件

2.使用调用

<template> <div> <div> <div>{{ $store.getters.getterAge }}</div> <div>{{ $store.getters.getterAgeCompare(18) }}</div> <div>{{ $store.getters.getterAgeCompare(10) }}</div> / <div>{{ getterAge }}</div> <div>{{ getterAgeCompare(18) }}</div> <div>{{ getterAgeCompare(10) }}</div> </div> ----------------------------------------------------------------------------- <div> <div>{{ $store.getters["dict/getterDict"] }}</div> <div>{{ $store.getters["dict/getterDictCompare"](1) }}</div> <div>{{ $store.getters["dict/getterDictCompare"](2) }}</div> <div>{{ $store.getters["dict/getterDictCompare"](3) }}</div> / <div>{{ getterDict }}</div> <div>{{ getterDictCompare(1) }}</div> <div>{{ getterDictCompare(2) }}</div> <div>{{ getterDictCompare(3) }}</div> </div> </div> </template> <script> import { mapGetters } from "vuex"; //第二种方式 1.引入 export default { data() { return {}; }, computed: { // 第一种形式 数组形式 ...mapGetters(["getterAge", "getterAgeCompare"]), //使用对象展开运算符将 getter 混入 computed 对象中 // 第二种方式 对象形式 ...mapGetters({ getterDict: "dict/getterDict", getterDictCompare: "dict/getterDictCompare", }), }, methods: {}, }; </script>

3.最终页面示例

getters的优点：

此外，使用getters的好处还可以使代码更加简洁，对于获取同样的数据，直接调用同一个方法即可，不需要每个组件都单独写一遍函数，直接调用在getters写好的方法就可以。

总结

到此这篇关于vuex学习进阶篇之getters使用的文章就介绍到这了,更多相关vuex getters的使用内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！