状态管理Vuex ：概念介绍

状态管理Vuex ：概念介绍

Vuex由来

• 介绍：什么是Vuex？

  • Vuex 是一个专为 Vuex.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  • uni-app内置了Vuex。

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

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

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

• 能解决什么问题

  基于上面的状态管理模式，如果是“单向数据流”理念则会很清晰简洁，但遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏，则需要解决下面的问题：

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

• Vuex 的产生

  • 多个组件共享状态时，把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为。这就是Vuex打的产生。

• 基本思想

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

优势与使用场景

• Vuex 的状态存储是响应式的，可跟踪每一个状态变化，一旦它改变，所有关联组件都会自动更新相对应的数据。

• 共享数据，解决了非父子组件的消息传递（将数据存放在state中）。

• 统一状态管理，减少了请求次数，有些情景可以直接从内存中的state获取数据。

Vuex与全局变量的区别

什么时候需要用Vuex？

• 当一个组件需要多次派发事件时。例如购物车数量加减。
• 跨组件共享数据、跨页面共享数据。例如订单状态更新。
• 需要持久化的数据。例如登录后用户的信息。
• 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好的在组件外部管理状态时。

项目结构

• 使用 Vuex 需要遵守的规则：

  • 应用层级的状态应该集中到单个 store 对象中。
  • 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
  • 异步逻辑都应该封装到 action 里面。

• 代码组织方式

  • 如果你 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

  • 对于大型应用，官方建议把 Vuex 相关代码分割到模块中。

    下面是项目结构示例：

    |—— pages
    |—— static
    |—— store
        |—— index.js            # 我们组装模块并导出 store 的地方
        |—— actions.js            # 根级别的 action
        |—— mutations.js        # 根级别的 mutation
        |—— modules                # 模块文件夹
            |—— cart.js            # 购物车模块
            |—— products.js        # 产品模块
    |—— App.vue
    |—— main.js
    |—— mainfest.json
    |—— pages.json
    |—— uni.scss
    

核心概念

• 每一个 Vuex 应用的核心就是 store （仓库），它包含着你的应用中大部分的状态（state）。
• 状态管理有5个核心：state、getter、mutation、action、module。（后续单独详细介绍）