🌟 为什么需要Vuex？

+ 复杂组件间的状态共享
+ 可预测的状态变更轨迹
+ 支持时间旅行调试
+ 统一管理异步操作
- 当应用简单时可能造成过度设计

🏗️ Vuex核心架构

graph TD
    A[Component] -->|Dispatch| B(Actions)
    B -->|Commit| C(Mutations)
    C -->|Mutate| D(State)
    D -->|Render| A
    D -->|Getters| A

🧩 五大核心概念详解

1. State：单一数据源

// store.js
export default new Vuex.Store({
  state: {
    user: {
      id: 1,
      name: 'John',
      permissions: ['read', 'write']
    },
    loading: false
  }
})

2. Getters：状态计算属性

getters: {
  canEdit: state => {
    return state.user.permissions.includes('write')
  }
}

3. Mutations：同步状态变更

mutations: {
  SET_LOADING(state, payload) {
    state.loading = payload
  },
  UPDATE_USER_NAME(state, newName) {
    state.user.name = newName
  }
}

4. Actions：异步操作处理

actions: {
  async fetchUserData({ commit }, userId) {
    commit('SET_LOADING', true)
    try {
      const res = await api.getUser(userId)
      commit('UPDATE_USER_DATA', res.data)
    } catch (error) {
      commit('SET_ERROR', error.message)
    } finally {
      commit('SET_LOADING', false)
    }
  }
}

5. Modules：模块化管理

const userModule = {
  namespaced: true,
  state: () => ({ /* ... */ }),
  mutations: { /* ... */ }
}

const store = new Vuex.Store({
  modules: {
    user: userModule,
    products: productModule
  }
})

💡 企业级实战方案

场景1：严格模式下的安全操作

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production'
})

场景2：表单双向绑定处理

computed: {
  message: {
    get() {
      return this.$store.state.form.message
    },
    set(value) {
      this.$store.commit('UPDATE_MESSAGE', value)
    }
  }
}

场景3：插件开发

const loggerPlugin = store => {
  store.subscribe((mutation, state) => {
    console.log('Mutation:', mutation.type)
    console.log('Payload:', mutation.payload)
  })
}

const store = new Vuex.Store({
  // ...
  plugins: [loggerPlugin]
})

🚀 最佳实践指南

⚠️ 常见问题排查

1. 响应式数据失效

// ❌ 错误写法
state.obj = { ...state.obj, newProp: 123 }

// ✅ 正确写法
Vue.set(state.obj, 'newProp', 123)

2. 模块命名空间

// 带命名空间的getter访问
computed: {
  ...mapGetters('user', ['fullName'])
}

// 带命名空间的action调用
methods: {
  ...mapActions('user', ['fetchProfile'])
}

3. 热重载配置

if (module.hot) {
  module.hot.accept(['./modules/user'], () => {
    store.hotUpdate({
      modules: {
        user: require('./modules/user').default
      }
    })
  })
}

🔮 Vuex与Pinia对比

+ 新项目推荐使用Pinia
+ 旧项目可继续使用Vuex
- 避免在简单项目中过度使用