vue:Vuex是什么？一起来深入理解Vuex

冷不防 2023-07-23 07:55 60阅读 0赞

**把官方文档好好看一遍，试着去理解一点作者的思想，然后加上自己的理解，嗯，就这样**

[**vue官方文档：Vuex 是什么？ | Vuex https://vuex.vuejs.org/zh/**][vue_Vuex _ _ Vuex https_vuex.vuejs.org_zh]

### Vuex ###

*  Vuex是什么？
 *  什么是“状态管理模式”？
 *  Vuex的应用场景
 *  vuex的核心概念

# Vuex是什么？ #

**`Vuex` 是一个专为 Vue.js 应用程序开发的`状态管理模式`。它采用集中式存储管理应用的所有组件的状态。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

# 什么是“状态管理模式”？ #

一个简单的 Vue 计数应用开始：

new Vue({ 
      // state
      data () { 
        return { 
          count: 0
        }
      },
      // view
      template: ` <div>{ { count }}</div> `,
      // actions
      methods: { 
        increment () { 
          this.count++
        }
      }
    })

注意代码中注释的三个地方，分别是‘state’、‘view’和’action‘，会有助于理解vuex的相关概念

这个状态自管理应用包含以下几个部分：

*  **state**，驱动应用的数据源；
 *  **view**，以声明方式将 state 映射到视图；
 *  **actions**，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]  
但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

*  多个视图依赖于同一状态。
 *  来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

**通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。**

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

# Vuex的应用场景 #

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

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。

但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

> Flux 架构就像眼镜：您自会知道什么时候需要它。

**需要注意一点，组件仍然保有局部状态**  
使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

**接下来我们正式理解vuex**

# vuex的核心概念 #

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的`状态 (state)`。Vuex 和单纯的全局对象有以下两点不同：

1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地`提交 (commit) mutation`。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

[vue_Vuex _ _ Vuex https_vuex.vuejs.org_zh]: https://vuex.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20230528/d35df5c34d9343898b6c27715b12d3cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/aaeaf4aea994457cbbb47c8330dbda28.png