在 Vue 中使用 Vuex 进行模块化管理状态非常简单，以下是一个基本的代码示例：

在 main.js 中引入 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)// 创建 store
const store = new Vuex.Store({// 定义状态state: {count: 0},// 定义 mutationsmutations: {increment(state) {state.count++}},// 定义 actionsactions: {increment(context) {context.commit('increment')}},// 定义 gettersgetters: {doubleCount(state) {return state.count * 2}}
})// 将 store 注入到 Vue 实例中
new Vue({store,render: h => h(App)
}).$mount('#app')

然后在组件中使用 Vuex：

<template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button></div>
</template><script>
import { mapState, mapGetters, mapActions } from 'vuex'export default {computed: {// 将 Vuex 的 state 映射为组件的计算属性...mapState(['count']),// 将 Vuex 的 getters 映射为组件的计算属性...mapGetters(['doubleCount'])},methods: {// 将 Vuex 的 actions 映射为组件的方法...mapActions(['increment'])}
}
</script>

这样就可以在组件中通过 count 获取状态值，通过 doubleCount 获取计算属性值，并通过 increment 方法触发 mutation 来修改状态。