vuex概述

1.概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

---

2.vuex的结构组成

2.1 状态管理树

• vuex使用单一状态树包含所有所有层级的关系，单例模式；

2.2 状态管理组成

state

• 存储在store里面的状态；

mutations（同步函数）

• 提交事件改变state中的变量状态（改变state中的状态必须commit mutations）；
• 函数构成：function（state，payload）；payload：载荷，额外参数，对象方式；
• 调用方法：this.$store.commit（‘方法名’，payload）；
• 使用常量替代mutation事件类型
  [SOME_MUTATION]（state）{
  // mutate state
  }
  亦可使用pathify插件自动继承封装；

actions（异步函数）

• action提交mutation，从而改变state中的状态；
• action可以包含异步操作；
• 函数构成：function（{ commit，state， … }，{ payload }）（通过参数解构的方式去简洁代码）；
• 调用方法：this.$store.dispatch(‘方法名’，payload)；
• 异步方法配合 await/async 使用；

---

3.vuex模块化

• 通过引入module属性，把子组件中store以模块的方式引入到父store；
• namespaced设置为true，子组件调用action或mutation时需要加上全局命名空间；

---

4.严格模式

• strict： true；
• 在严格模式下，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到；
  在生产环境下禁止启用严格模式
  开发环境下开启：

strict：process.env.NODE_ENV !== 'production'