这是我参与「第五届青训营」笔记创作活动的第 8 天
前言
在青训营的课程介绍中，来自字节的老师为我们介绍了有关react的状态管理工具，例如redux、xstate和mobx等等，在学习完react的状态管理库后，作者又去了解了有关vue的状态管理库，本篇文章将为大家介绍vue常用的状态管理库——vuex。
什么是状态管理库
通俗来讲，当我们在开发中，遇到一些需要全局共享的数据时，例如登录信息和购物车信息等等，我们要在多个页面中同时使用这组数据，这时我们可以将这组数据放到一个类似于仓库的地方，按需取得。这些数据在仓库中被称为状态，我们在可以对这些状态进行修改等操作，这样一个仓库即为状态管理库。
vuex
从官方文档的解释来看，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
vuex的安装
- 下载
使用 npm install vuex --save 命令下载
- 创建store
安装好Vuex 之后，让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：
//以下内容来自vuex官方文档
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
现在我们可以在组件中通过 store.state.count 来获取到store中的状态
- 获取状态
//可以在任意组件中执行如下命令
store.commit('increment')
console.log(store.state.count) // -> 1
执行commit代表我们执行store中的mutation来修改状态，使用 store.state.count 获取到state中的count，因为我们先执行了increment，所以执行count + 1 变为 1
vuex的核心
要使用vuex就需要牢记其中的三大核心——state、mutation和action
1. state（存放状态）
state简单来说就是亘古不变的存放状态的地方，我们会把所有需要状态共享的状态存放在state当中，当其他组件需要取某一个状态就可以到state中去拿
2. mutation（更改状态）
在vuex中，我们所有的有关修改状态的操作一定是由mutation来完成的，简单来说mutation就是亘古不变的修改状态的地方，但是因为mutation受到devtools的影响，他只能进行同步的操作
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
当我们在组件中想要触发mutation操作，需要我们使用commit操作
store.commit('eventName')
3. action（异步逻辑）
为了解决mutation中无法进行异步操作问题，vuex引入了action来记录异步逻辑操作，但是需要我们注意的是，action不进行修改状态的操作，需要执行修改状态的操作也是由action提交操作到mutation中进行修改
action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
在组件中，我们可以通过dispatch的方法来触发action
store.dispatch('actionName')
核心使用示例
const store = new Vuex.Store({
//状态放置在state
state: {
name: 'zy',
age: 20
},
//更改数据需要用到mutation
mutation: {
setName(state, payload) {
//直接使用赋值的方式进行修改
state.name = payload
}
},
//异步操作放到action
action: {
setAsyncName(context){
//commit关键字将修改的操作放到mutation
context.commit('setName', 'zy123')
}
}
})
在组件中使用
//组件中
method: {
//需要修改状态（同步）
updateName(){
store.commit('setName', 'ph')
}
//需要修改状态（异步）
updateAsyncName(){
store.dispatch('setName', 'ph')
}
}
以上两个就是当我们在组件中修改状态的方式，分为同步与异步操作
总结
通过本篇文章的内容，相信大家已经对vuex有了初步了解，不难看出状态管理工具适用于以下两个场景
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
除了vuex以外，近几年pinia也逐渐被大家所知，pinia同样也是vue的管理工具之一，相比于vuex的优点在于，代码更加简洁，可读性强；更好的支持了TypeScipt的使用；pinia更适合中小型的项目，而vuex因为其内容庞大，更适合大型项目的开发。
以上就是本人对于vuex的一些理解，青训营中的老师针对状态管理工具给出了更深一步的解释，从多方面去讲解数据管理库的使用场景和使用方法，令大家受益匪浅。
