山东省建设厅招标网站首页安徽省美好乡村建设网站

Vuex 简介

Vuex 是 Vue.js 的官方状态管理库，专为复杂应用设计，用于集中管理所有组件的共享状态。它通过严格的规则确保状态变更的可预测性，并与 Vue 的响应式系统深度集成。

为什么需要 Vuex?

• 跨组件状态共享： 避免通过层层传递 props 或事件管理数据。
• 状态变更追踪： 通过 DevTools 实现时间旅行调试
• 异步操作管理： 统一处理 API 请求等异步任务

核心概念与工作流程

1.核心概念

概念	描述	特点	场景
State	存储应用状态（唯一数据源）	响应式，不可直接修改	用户登录信息、全局状态数据
Getters	从 State 派生的计算属性（类似组件 computed）	可缓存，依赖 State 变化	过滤后的列表
Mutation	同步修改 State 的方法（需要通过 commit 触发）	必须是同步函数	更新用户信息
Action	处理异步操作，最终通过提交 Mutations 修改 State （通过 dispatch 触发）	可包含任意异步操作	调用 API 获取数据后更新
Modules	将 store 分割为模块，每个模块拥有独立的 state、getters、mutations、actions	解决单一状态树臃肿问题	用户模块、商品模块

数据流示意图

组件 ->  dispatch -> actions -> commit -> mutations -> modify state -> 响应式更新视图

核心 API 详解

1、创建 Store

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.store({state:{ count: 0},getters: {doubleCount: state => state.count * 2},mutations: {increment(state, payload){state.count += payload.amount;}},actions: {asyncIncrement({ commit }, payload){setTimeout(()=>{commit('increment', payload)}, 1000);}}	
})

2、组件中访问 State 和 Getters

直接访问

this.$store.state.count;       // 访问 state
this.$store.getters.doubleCount;   // 访问 getter

辅助函数（推荐）

import { mapState, mapGetters } from 'vuex';export default {computed: {// 映射 this.count 为 this.$store.state.count...mapState(['count']),// 重命名或嵌套映射...mapState({customCount: state => state.count,user: state => state.user.profile}),// 映射 Getters...mapGetters(['doubleCount'])}
}

3、触发 Mutations 和 Actions
直接调用

// 提交 Mutation
this.$store.commit('increment', { amount: 18});// 分发 Action
this.$store.dispatch('asyncIncrement', { amount: 15})

辅助函数

import { mapMutations, mapActions } from 'vuex';export default {methods: {// 映射 this.increment() 为 this.$store.commit('increment')...mapMutations(['increment']),// 映射 Action...mapAction(['asyncIncrement']),// 重命名...mapAction({add: 'asyncIncrement'})}
}

4、高级 API

// 监听所有 Mutations 的执行，适用于日志记录或状态持久化
store.subscribeconst unsubscribe = store.subscribe((mutation, state) => {console.log(`Mutation 类型: ${mutation.type}`);console.log('Mutation 载荷:', mutation.payload);console.log('当前 State:', state);
})// 取消监听
unsubscribe()

// 监听 Action 的执行，适用于异步任务监控
store.subscribeActionconst unsubscribeAction = store.subscribeAction({before: (action, state) => { // Action 执行前 }after: (action, state) => { // Action 执行后 }
})

// 替换整个 State 树，常用于状态重置
store.replaceStatestore.replaceState({ count: 100})

模块化开发 （modules）

1、模块化定义

// store/modules/user.js
export default {namespaced: true, // 启用命名空间state:() => ({ name: 'Guest'}),mutations:{setName(state, name){state.name = name;}},actions: {asyncFetchUser({ commit }){// 异步获取用户数据}}
}

2、注册模块

// store/index.js
import user from './modules/user';export default new Vuex.Store({modules: { user }
})

3、访问模块内容

// 访问模块 State
this.$store.state.user.name;// 辅助函数映射
...mapState('user',['name']),
...mapAction('user',['asyncFetchUser'])// 动态绑定模块名
...mapState({userName: (state) => state[this.moduleName].name
})

4、动态模块注册

// 注册模块
store.registerModule('dynamicModule', { // 模块配置 })// 卸载模块
store.unregisterModule('dynamicModule')

插件（Plugins）与扩展

1、内置插件 createLogger

import { createLogger } from 'vuex';const store = new Vuex.Store({plugins: [createLogger()],  // 开发环境使用
})

2、自定义插件示例（状态持久化）

const persistencePlugun = (store) => {// 初始化时读取本地存储const saveState = localStorage.getItem('vuex-state');if(saveState){store.replaceState(JSON.parse(saveState));}// 监听 mutations 自动自动保存store.subscribe((mutation, state) => {localStorage.setItem('vuex-state', JSON.stringify(state))})
}const store = new Vuex.Store({plugins: [persistencePlugun],  // 开发环境使用
})

高级技巧与最佳实践

1、严格模式

const store = new Vuex.Store({strict: process.env.NODE_ENV !== 'production', // 生产环境关闭// ...
});

2、表单处理

<input :value='message' @input='updateMessage'><script>
export default {computed:{message: {get() { return this.$store.state.message }set(value) { this.$store.commit('updateMessage', value)}}}
}