Vue3 中如何在组件中使用 Vuex 进行状态管理？

npm install vuex@4 --save

// src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state() {
    return {
      count: 0,
      user: { name: '访客' }
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    },
    userName(state) {
      return state.user.name
    }
  },
  mutations: {
    increment(state) {
      state.count++
    },
    setUser(state, payload) {
      state.user = payload
    }
  },
  actions: {
    async incrementAsync({ commit }, delay) {
      await new Promise(resolve => setTimeout(resolve, delay))
      commit('increment')
    },
    async fetchUser({ commit }) {
      // 模拟 API 请求
      const mockUser = { name: '张三' }
      commit('setUser', mockUser)
    }
  }
})

<template>
  <div class="vuex-demo">
    <h3>状态管理示例</h3>
    
    <!-- 访问 state 和 getters -->
    <p>当前计数：{{ count }}</p>
    <p>计数加倍：{{ doubleCount }}</p>
    <p>当前用户：{{ userName }}</p>

    <!-- 操作按钮 -->
    <button @click="handleIncrement">+1（同步）</button>
    <button @click="handleIncrementAsync">+1（延迟1秒）</button>
    <button @click="handleFetchUser">加载用户</button>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'

// 1. 获取 store 实例
const store = useStore()

// 2. 访问 state（通过 computed 保持响应式）
const count = computed(() => store.state.count)
const userName = computed(() => store.state.user.name)

// 3. 访问 getters
const doubleCount = computed(() => store.getters.doubleCount)

// 4. 提交 mutations（同步修改状态）
const handleIncrement = () => {
  store.commit('increment') // 调用 mutation
}

// 5. 调用 actions（处理异步操作）
const handleIncrementAsync = () => {
  store.dispatch('incrementAsync', 1000) // 传递参数（延迟时间）
}

const handleFetchUser = () => {
  store.dispatch('fetchUser') // 调用异步 action
}
</script>

<style scoped>
button {
  margin: 0 8px;
  padding: 4px 8px;
}
</style>

// store/index.js 中添加
modules: {
  cart: {
    namespaced: true, // 启用命名空间
    state: () => ({ items: [] }),
    mutations: {
      addItem(state, item) {
        state.items.push(item)
      }
    }
  }
}

// 访问模块 state
const cartItems = computed(() => store.state.cart.items)

// 提交模块 mutation
const addToCart = () => {
  store.commit('cart/addItem', { id: 1, name: '商品' })
}

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

export default {
  computed: {
    ...mapState(['count', 'user']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync', 'fetchUser'])
  },
  mounted() {
    console.log(this.count) // 访问映射的状态
  }
}
</script>