vuex 是什么？以及核心和使用

偏执的太偏执、 2023-01-05 12:47 380阅读 0赞

## vuex是什么 ##

> Vuex是一个用来管理组件之间通信的插件，它是一个专为【vue.js】应用程序开发的状态管理模式，它解决了组件之间同一状态的共享问题，它能够更好地在组件外部管理状态。

## 什么是Vuex？ ##

> Vuex是一个专为vue.js应用程序开发的状态管理模式。它解决了组件之间同一状态的共享问题。因为它采用的是集中式存储管理应用的所有组件状态，所以组件就可以和store通讯了。其实Vuex就是用来管理组件之间通信的一个插件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

## 为什么需要Vuex？ ##

> 当多个组件依赖于同一个状态时，由于多层嵌套使得传参的方法变得复杂，另外如果使用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，会使得该模式变得脆弱，从而无法维护代码。从而需要使用Vuex来解决这个问题。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]

## Vuex 有五大核心 ##

> state 所有数据都存储到state中去 ，state 是一个对象  
> mutations 是可以直接操作 state 中的数据  
> actions 只能调用 mutations 的方法  
> getters 类似于计算属性实现对 state 值的数据做一些逻辑性操作  
> modules 将仓库分模块化进行存储的

## 什么情况下使用 Vuex？ ##

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

> 如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果要创建的够简单，最好不要使用 Vuex。一个简单的 store 模式就足够了。但是，如果需要构建一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态，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。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221119/74adbb27cf584c39945568d35a10954a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: /images/20221119/5558bc59307745cfa3187fb6e2b255f9.png