浅谈vuex应用场景
导语：个人对于Vuex一点浅显的认识
vuex 作为 vue 生态中用于状态管理的一种模式，已被广泛应用于 vue 单页应用开发中。下面谈谈自己对 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。
---------------------------------------------------------------
原文作者，腾讯工程师Jeff。