在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 属性，区别是它是全局共享的。
比如你想拿到所有已完成的待办事项：
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 更清晰、组件更简洁。基本上就这些。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
