本文详细介绍了Vuex在Vue.js应用中的状态管理，从基本安装、创建Store，到核心概念如State、Getters、Mutations和Actions的使用，以及模块化管理（Modules）的实战应用。通过实例演示，提升应用状态的组织和维护效率。
🖥️ Vue.js专栏：Vue.js 全家桶 Vuex状态管理
🧑💼 个人简介：一个不甘平庸的平凡人🍬✨ 个人主页：CoderHing的个人主页
🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️
👉 你的一键三连是我更新的最大动力❤️
目录
一、认识应用状态管理
什么是状态管理
在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需 要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就 称之为是 状态管理。
在前面我们是如何管理自己的状态呢
在Vue开发中，我们使用组件化的开发方式；
而在组件中我们定义data或者在setup中返回使用的数据，这些数 据我们称之为state；
在模块template中我们可以使用这些数据，模块最终会被渲染成 DOM，我们称之为View；
在模块中我们会产生一些行为事件，处理这些行为事件时，有可能 会修改state，这些行为事件我们称之为actions；
复杂的状态管理
JavaScript开发的应用程序，已经变得越来越复杂了：
JavaScript需要管理的状态越来越多，越来越复杂
这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等
也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页；
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态；
我们是否可以通过组件数据的传递来完成呢
对于一些简单的状态，确实可以通过props的传递或者Provide的方式来共享状态
但是对于复杂的状态管理来说，显然单纯通过传递和共享的方式是不足以解决问题的，比如兄弟组件如何共享数据呢？
Vuex的状态管理
管理不断变化的state本身是非常困难的:
状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化
当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪；
可以将组件的内部状态抽离出来，以一个全局单例的方式来管理
在这种模式下，我们的组件树构成了一个巨大的 “试图View”
不管在树的哪个位置，任何组件都能获取状态或者触发行为
通过定义和隔离状态管理中的各个概念，并通过强制性的规则来维护视图和状态间的独立性，我们的代码边会变得更加结构 化和易于维护、跟踪；
这就是Vuex背后的基本思想，它借鉴了Flux、Redux、Elm（纯函数语言，redux有借鉴它的思想）
VueX的状态管理图解
二、Vuex的基本使用
Vuex的安装
| JavaScript |
创建Store
每个Vuex应用的核心就是store(仓库):
store本质上是一个容器,它包含着你的应用中心大部分的状态(state)
Vuex和单纯的全局对象有什么区别?
第一:Vuex的状态存储是响应式的
当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会被更新
第二:不能直接改变store中的状态
改变store中的状态的唯一途径就显示 提交(commit)mutation
这样使得我们可以方便的跟踪每一个状态的变化,从而让我们能够通过一些工具帮助我们更好的管理应用的状态
使用步骤:
创建Store对象;
在app中通过插件安装
组件中使用store
在组件中使用store,按照如下的方式:
在模版中使用;
在options api中使用 如 computed
在setup中使用
单一状态树(概念)
Vuex使用单一状态数:
用 一个对象 就包含了全部的应用层级的状态
采用的是SSOT Single Source of Truch 也可以翻译成单一数据源
意味着,每个应用将仅仅包含一个store实例:
但状态树和模块化并不冲突.
单一状态树的优势:
如果你的状态信息是保存到多个Store对象中的,那么之后的管理和维护等都会变得特别困难
所以Vuex也使用了单一状态数来管理应用层级的全部状态
单一状态树能让我们 最直接的方式找到某个状态的片段
而且在之后的维护和调试过程中,也可以非常方便的管理和维护
三、核心概念State
组件获取状态
在前面如果觉得那种方式有点繁琐(表达式过长),那么我们可以使用计算属性:
如果我们有很多状态都需要获取的话,可以使用mapSt
最低0.47元/天 解锁文章
扫一扫
560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
