什么是Vuex

Vuex 是 Vue.js 官方提供的 状态管理库，用于在多个组件之间 集中式管理共享状态。

在 Vue 项目中：如果有数据是多个组件都需要用的（比如用户信息、购物车数据，那么就可以放到 Vuex 里统一管理，避免组件之间手动传来传去，就像一个公共的数据仓库（Store），所有组件都可以：从 Vuex 获取数据，通过 Vuex 修改数据

Vuex 能做什么

能力	描述
全局状态管理	在组件之间共享数据，比如登录状态、用户资料等
数据响应式	修改 Vuex 中的数据，所有使用到的组件都会自动更新
调试方便	有 devtools 插件，状态变化可追踪
支持模块拆分	项目大了后，可以按功能拆分模块
适合中大型项目	简化复杂组件通信逻辑

Vuex 的核心概念

名称	说明
state	存储数据（全局状态）
getters	从 state 派生数据（相当于 computed）
mutations	修改 state 的方法（同步）
actions	执行异步操作（如请求接口）后提交 mutation
modules	模块化管理多个状态仓库

使用示例

1. 定义 store

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

2. 在主入口中挂载

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

3. 在组件中使用

<template>
  <div>
    {{ count }} / {{ double }}
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount']),
    double() {
      return this.doubleCount
    }
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>