前端框架——浅谈vuex应用场景

一、什么是vuex

vuex 作为 vue 生态中用于状态管理的一种模式，采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可以预测的方式发生变化。已被广泛应用于 vue 单页应用开发中。下面谈谈自己对 vuex 的一些个人见解以及在实际项目中的应用场景。

二、vuex的组成

vuex 的几个核心概念Store：Vuex 使用一个 Store 对象管理应用的状态，一个 Store 包括 State, Getter, Mutation, Action 四个属性。

State：State 意为“状态”，是 vuex 状态管理的数据源。
Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出。
Mutation：Mutaion 是 vuex 中改变 State 的唯一途径（严格模式下），并且只能是同步操作。
Mutaion 使得状态变得可追踪，配合一些 devtools 可以实现 time-travel 的调试体验。
Action：一些对 State 的异步操作可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态。
Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module。

上图为官网中 vuex 各个要素的关系图，总的来说，我们可以在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面。

三、什么样的应用场景下需要 vuex ？

如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果你的应用够简单，那最好不要使用 Vuex。一个简单的 global event bus 就足够所需了。但是，如果需要构建是一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

vuex 一般用于中大型 web 单页应用中对应用的状态进行管理，对于一些组件间关系较为简单的小型应用，使用 vuex 的必要性不是很大，因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信，vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

使用 vuex 解决跨组件通信问题

跨组件通信一般指非父子组件间的通信，父子组件的通信一般可以通过以下方式：
1、通过 prop 属性实现父组件向子组件传递数据
2、通过在子组件中触发事件实现向父组件传递数据
非父子组件之间的通信一般通过一个空的 Vue 实例作为 中转站，也可以称之为 事件中心、event bus。

// 创建事件中心实例
let bus = new Vue()

// 在组件 A 中触发事件
bus.$emit('test', 1)

// 在组件 B 中接受事件
bus.$on('test', (id) => {
// ...
})

采用 event bus 的方式适合简单的跨组件事件触发，对于多层级组件嵌套等较为复杂的场景，使用 vuex 能更好地应对。vuex 是通过将 state 作为数据中心、各个组件共享 state 实现跨组件通信的，此时的数据完全独立于组件，因此将组件间共享的数据置于 State 中能有效解决多层级组件嵌套的跨组件通信问题。

vuex 作为数据存储中心

vuex 的 State 在单页应用的开发中本身具有一个“数据库”的作用，可以将组件中用到的数据存储在 State 中，并在 Action 中封装数据读写的逻辑。这时候存在一个问题，一般什么样的数据会放在 State 中呢？ 目前主要有两种数据会使用 vuex 进行管理：
1、组件之间全局共享的数据
2、通过后端异步请求的数据

本人在实际的项目开发过程中更多的是应用第二种，即把通过后端异步请求的数据都纳入 vuex 状态管理，在 Action 中封装数据的增删改查等逻辑，这样可以一定程度上对前端的逻辑代码进行分层，使组件中的代码更多地关注页面交互与数据渲染等视图层的逻辑，而异步请求与状态数据的持久化等则交由 vuex 管理。

下面是一个使用 vuex 管理用户数据的 demo：

// Stateconst state = {
userInfo: {}
}
// Mutaionconst mutations = {
UPDATE_USER_INFO (state, payload) {
state.userInfo = payload
}
}
// Actionexport const fetchUserInfo = async ({commit}) => {
// ... 请求用户数据
// 调用 Mutaion 写入用户数据
commit('UPDATE_USER_INFO', userInfo)
}
// Component// 在组件中引入 Action
...mapAction({
fetchUserInfoAction: `fetchUserInfo`
})
// 在 method 中调用 Action
let res = self.fetchUserInfoAction()

总结:
vuex 具体应用在哪取决于项目的规模以及具体的业务场景，可能是为了解决多层嵌套组件之间的通信问题，或是为了更好地管理应用中错综复杂的状态关系，而不能为了用 vuex 而在项目中使用 vuex。