Vuex 的5个核心属性是什么?

Vuex 是 Vue.js 的官方状态管理库，它通过 5 个核心属性 来管理组件间共享的状态。

Vuex 的 5 个核心属性

属性名	类型	作用说明
state	对象	存储全局状态数据（即“数据源”），所有组件都可以访问
getters	对象/函数	类似于 computed，用于从 state 中派生出计算属性
mutations	对象/函数	修改 state 的唯一方式，必须是同步操作
actions	对象/函数	提交 mutations 的方法，支持异步操作，如调用接口
modules	对象	允许将 store 分模块管理，适合大型项目

核心属性用途对比表

属性	是否异步	修改数据	适用场景
state	❌	✔️	存储状态
getters	❌	❌	派生状态（只读）
mutations	❌	✔️	修改状态（同步）
actions	✔️	❌（通过 commit）	异步逻辑（如请求接口）
modules	❌	❌	拆分模块化管理

示例代码（快速理解每个属性）

// store.js
export default new Vuex.Store({
  // 1. state：全局共享数据
  state: {
    count: 0
  },

  // 2. getters：从 state 派生计算属性
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },

  // 3. mutations：唯一能修改 state 的方法（同步）
  mutations: {
    increment(state) {
      state.count++
    },
    setCount(state, val) {
      state.count = val
    }
  },

  // 4. actions：异步逻辑，最终提交 mutations
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },

  // 5. modules：拆分子模块管理状态
  modules: {
    user: {
      namespaced: true,
      state: { name: '张三' },
      mutations: {
        setName(state, newName) {
          state.name = newName
        }
      }
    }
  }
})