vuex中getter是干什么的

在Vuex中，getter是用来获取store中的状态的计算属性。它的作用类似于Vue中的计算属性，可以对store中的状态进行处理、过滤、筛选等操作，然后返回一个新的值。getter可以接受state作为第一个参数，其他参数可以通过返回一个函数来实现。getter的结果会被缓存起来，只有当依赖的状态发生变化时才会重新计算。这样可以提高性能，避免不必要的计算。

相关问题

vuex中getter的用法

在Vuex中，getter用于从store中获取数据并进行处理，类似于计算属性的作用。Getter可以理解为store的计算属性，它接收state作为第一个参数，并可以接收其他getter作为第二个参数。Getter可以通过在store中定义一个getters对象来创建。

例如，假设我们有一个名为todos的模块，其中包含一个状态todosList。我们可以通过getter来获取todosList的长度：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    todosList: ['todo1', 'todo2', 'todo3']
  },
  getters: {
    todosCount: state => {
      return state.todosList.length;
    }
  }
});

export default store;

然后我们可以在组件中通过`this.$store.getters.todosCount`来获取todosList的长度：

// MyComponent.vue
export default {
  computed: {
    todosCount() {
      return this.$store.getters.todosCount;
    }
  }
}

这样，我们就可以在组件中直接使用`todosCount`来获取todosList的长度了。

Getter还可以接收其他getter作为第二个参数，以便在getter之间进行嵌套和组合。这使得我们可以利用getter来计算一些复杂的派生状态。

总结一下，getter在Vuex中是用来从store中获取数据并进行处理的，类似于计算属性的作用。通过在store中定义getters对象，我们可以在组件中方便地使用getter来获取store中的数据。

vuex中getter在组件中使用的例子

假设我们有一个存储了用户信息的state：

state: {
  user: {
    name: 'John Doe',
    age: 30,
    email: 'johndoe@example.com'
  }
}

我们可以定义一个getter来获取用户的姓名和年龄：

getters: {
  userNameAndAge: state => {
    return state.user.name + ' (' + state.user.age + ')'
  }
}

在组件中使用这个getter：

<template>
  <div>
    <p>{{ userNameAndAge }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userNameAndAge'])
  }
}
</script>

这样就可以在组件中使用getter来获取用户姓名和年龄了。注意，在使用getter之前，需要先引入`mapGetters`函数。