前端知识点记录:Vuex详解

49 阅读1分钟

第三题:Vuex详解

定义

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

使用场景

中大型单页面应用,管理组件外部共享状态时使用。

核心概念

State

用于存储应用程序的状态,相当于一个存储数据的仓库。

Getter

用于从State中派生出一些状态,相当于State的计算属性。

Mutation

用于修改State的方法,必须是同步的。每个Mutation都有一个字符串类型的事件名和一个回调函数,回调函数用于实际修改状态。

Action

用于处理异步操作,通过提交Mutation来间接修改State。Actions可以包含任意异步操作。

Module

用于将应用程序的状态分割成模块,每个模块拥有自己的State、Mutations、Actions和Getters,使得状态管理更加清晰和有序。‌

辅助函数

mapXXX 引入多个时的便捷写法。

数据持久化

刷新页面会丢失Vuex中的状态,通过绑定到浏览器存储,可利用插件 vuex-persistedState

优点及缺点

优点:
集中管理状态,便于维护和调试;通过明确的规则保证状态变更的同步性;支持异步操作,适合复杂的应用状态管理。
缺点:
增加了项目的复杂性,需要更多的初始设置;对于小型项目可能显得过于繁琐;需要理解其工作原理和规则。

严格模式

严格模式必须通过 mutation 函数修改 state 的值,否则会抛出异常。