vuemapgetters

 

Vuex 是 Vue.js 的状态管理库。它允许我们集中管理应用程序的状态，并且能在不同组件之间共享状态。通过使用 Vuex，我们可以更加轻松地管理应用程序的状态，提高开发效率。

 

Vuex 的核心概念包括 state、getters、mutations 和 actions。在本文中，我将重点讨论 Vuex 中的 getters 。

 

Getter 是 Vuex 中的一个计算属性，它可以根据 store 的 state 来计算出一个新的值。Getters 可以接受其他 getters 作为参数，并且可以根据需要进行缓存。Getter 的目的是能够在 store 中取值，并且可以根据业务逻辑进行一些计算。

 

在使用 Vuex 的过程中，我们可以通过 getters 来获取 store 的 state，而不需要直接访问 store。这样可以保持组件的简洁性和可维护性。同时，getters 也能够提供一些复杂的逻辑处理，以便我们在组件中能够更加方便地使用。

 

使用 getters 的好处主要有以下几点：

 

1. 封装 state 访问逻辑：getters 可以将复杂的 state 访问逻辑进行封装，使组件能够更加简洁地获取所需的数据。

 

2. 缓存计算结果：Vuex 的 getters 是懒执行的，并且会缓存计算结果，所以在多个组件中多次访问同一个 getter 时，只会计算一次。

 

3. 可测试性：使用 getters 时，我们可以使用单元测试来验证 getter 的正确性，并且可以通过边界测试来确保 getter 在边界条件下的正常工作。这样可以提高代码的可测试性。

 

4. 可复用性：getters 可以在多个组件中复用，这样可以减少代码的重复性，并使代码更加易于维护。

 

下面是几个常见的 getters 的示例：

 

```javascript

// store.js

const store = new Vuex.Store({

state: {

todos: [

{ id: 1

text: 'Learn Vue'

done: true }

 

{ id: 2

text: 'Learn Vuex'

done: false }

 

{ id: 3

text: 'Build an app'

done: false }

]

}

 

getters: {

// 获取所有的 todos

allTodos: state => state.todos

 

// 获取未完成的 todos

activeTodos: state => state.todos.filter(todo => !todo.done)

 

// 获取已完成的 todos

completedTodos: state => state.todos.filter(todo => todo.done)

}

})

```

 

在上面的代码中，我们定义了三个 getters。`allTodos` 返回所有的 todos，`activeTodos` 返回未完成的 todos，`completedTodos` 返回已完成的 todos。这样我们就可以在组件中方便地使用这些 getters。

 

在组件中使用 getters 的方式也非常简单：

 

```javascript

// TodoList.vue

 

```

 

在上面的代码中，我们使用了`mapGetters`辅助函数来将 getters 映射为组件的计算属性。这样我们就可以方便地在组件中使用这些 getters 了。

 

综上所述，getters 是 Vuex 中非常有用的一个特性。它允许我们封装 state 访问逻辑，并为我们的组件提供一些复杂的逻辑处理。同时，getters 也提高了代码的可测试性和可复用性。因此，在开发 Vue.js 应用程序时，我们应该充分利用 getters 来提高我们的开发效率。