vuex 在选项式 api 中的正确用法是：读数据用 mapstate 映射到 computed，改数据必须通过 mutations（仅同步），异步逻辑交由 actions 处理，派生状态封装到 getters。
在选项式 API 中使用 Vuex 存取全局状态，核心是明确“谁改数据、谁读数据、怎么改、怎么读”，避免直接操作 state，严格遵循 Vuex 的响应式约定和单向数据流原则。高效的关键在于用对辅助函数、区分同步/异步逻辑、并保持 store 结构清晰。
state 数据的正确读取方式
不推荐在模板中频繁写 {{ $store.state.xxx }}，尤其当多个组件重复引用同一字段时，既冗长又难维护。应优先使用 mapState 映射到 computed：
- 在组件 script 中导入：
import { mapState } from 'vuex' - 在
computed中展开：computed: { ...mapState(['userInfo', 'token']) } - 若需计算派生值或嵌套取值，可用对象写法：
...mapState({ userName: state => state.user.name }) - 注意：mapState 返回的是 getter 函数，必须放在 computed 内才能响应式生效
mutations 是唯一同步修改 state 的入口
所有对 state 的直接变更（比如登录后设置用户信息、清空购物车）都必须通过 mutations，且只能是同步操作：
- 定义时接收两个参数：
setUser(state, payload)，其中 payload 可为对象、字符串或数组 - 组件中触发用
this.$store.commit('setUser', { id: 1, name: '李四' }) - 避免在 mutations 里调用 API 或 setTimeout——这类逻辑应交给 actions 处理
actions 封装异步逻辑与业务流程
涉及接口请求、多步状态变更、条件判断等场景，统一走 actions：
- actions 接收
context对象（含 commit、dispatch、state 等），可解构使用：async login({ commit }, credentials) - 成功后 commit mutation：
commit('setUser', res.data)，而非直接改 state - 组件中调用：
this.$store.dispatch('login', { username, password }) - 支持返回 Promise，便于外部 await 或链式处理
getters 用于封装可复用的派生状态
当多个组件需要相同计算逻辑（如“未读消息数”“已登录且有权限”），把逻辑抽到 getters 中：
- 定义示例：
hasPermission: state => state.user.roles.includes('admin') - 组件中用
mapGetters(['hasPermission'])映射，或直接this.$store.getters.hasPermission - getters 也支持传参写法（如
getUserById: (state) => (id) => state.users.find(u => u.id === id)）
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
