Vuex中的state和getters有什么区别和联系？

在vuex中，state是存储数据的“仓库”，getters是对state数据进行加工的“计算属性”。state用于保存原始数据，如count、user、todos等，供组件直接访问；getters则通过函数形式接收state作为参数，返回经过过滤、格式化或组合后的数据，如donetodos和gettodobyid。两者协作时，state保持原始状态不变，getters提升组件逻辑清晰度，避免模板内复杂运算。使用时应合理选择，仅对频繁复用或需计算的数据使用getters，简单数据直接访问state即可，并注意模块化store时开启命名空间。

在Vuex中，state和getters都跟数据有关，但它们的角色和用途不一样。

简单来说：

• State 是存储数据的地方，是整个 Vuex 的“源头”。
• Getters 则像是从 state 中派生出来的“计算属性”，用来加工、筛选、组合 state 数据后返回结果。

两者配合使用，可以更高效地处理组件中需要用到的数据。

立即学习“前端免费学习笔记（深入）”；

一、State：数据的“仓库”

你可以把 state 想象成一个数据仓库，里面存放着整个应用中需要共享的状态。比如用户信息、商品列表、配置项等等。

举个例子：

state: {
  count: 0,
  user: { name: 'Tom', age: 25 },
  todos: [
    { id: 1, text: '学习Vuex', done: true },
    { id: 2, text: '写项目文档', done: false }
  ]
}

这些数据可以在多个组件之间共享和修改。当你想直接获取某个原始数据时，就从 state 中取。

二、Getters：基于state的“加工车间”

Getters 就像是一些函数，它们接收 state 作为参数，然后返回加工后的结果。它有点像 Vue 组件中的 computed 属性，区别是它是全局共享的。

比如你想拿到所有已完成的待办事项：

魔乐社区

天翼云和华为联合打造的AI开发者社区，支持AI模型评测训练、全流程开发应用

102

查看详情

getters: {
  doneTodos: (state) => {
    return state.todos.filter(todo => todo.done)
  }
}

你也可以带参数，比如根据 ID 找到某个任务：

getters: {
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

这样你在组件里就可以通过

this.$store.getters.getTodoById(1)

三、State 和 Getters 的联系与协作

虽然职责不同，但 getters 离不开 state，它的输入就是 state，输出是对 state 的进一步处理。

常见的配合方式包括：

• 根据 state 数据过滤出一部分内容（如 doneTodos）
• 对数据做格式化或转换（如将时间戳转成可读日期）
• 组合多个 state 字段生成新数据（如拼接用户名和邮箱）

这种分离的好处是：

• state 保持干净、原始
• getters 让组件逻辑更清晰，避免在模板中做复杂运算

四、使用建议和注意事项

在实际开发中，有些细节需要注意：

• 不要滥用 getters，只对那些需要频繁复用或计算的值才定义。
• 如果只是简单的数据访问，直接用 state 更省事。
• 如果你发现组件里有很多类似

  computed

  登录后复制
  的逻辑，可能更适合移到 getters 中。
• 使用模块化 store 时，记得开启命名空间，否则 getters 可能找不到正确的 state。

总的来说，state 是数据源，getters 是对数据的再加工。用好这两个部分，可以让 Vuex 更清晰、组件更简洁。基本上就这些。

以上就是Vuex中的state和getters有什么区别和联系？的详细内容，更多请关注php中文网其它相关文章！