快速上手VueX

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情

前言

本文主要介绍了VueX状态管理器、VueX的核心概念、store.js以及vuex的工作流程。理解了这些概念可以让我们快速上手使用VueX，实现对Vue的状态管理。

VueX

VueX是对Vue的状态管理器，可以统一管理、维护各个组件的状态。

VueX核心概念

• Store：是Vuex应用程序的核心，每个应用仅有一个Store，它是一个仓库，包含着应用中的大部分状态。但是不能直接改变Store中的状态，要通过提交Mutations改变状态。
• State：用来存放数据源，也就是Store，因为Store是唯一的，所以State也是唯一的，称为单一状态树，这里的状态是响应式的。
• Getter：相当于Vuex中的计算属性，方可以对计算的结果进行缓存，只有当依赖的状态发生改变的时候，才会重新计算。
• Mutation：Mutation是状态更新的唯一途径；
• Actions：可以进行异步的操作，操作结束后提交到 mutation，而不是直接变更状态。
• Module：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters；

store.js： ``` import Vue from 'vue' import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

```

vuex的工作流程

vuex的工作流程分为五步：

• 第一步： 用户触发事件，通过dispatch将事件提交到actions；
• 第二步：actions接收到这个事件之后，在actions中可以执行异步操作；
• 第三步：将同步操作通过commit分发到mutations；
• 第四步：mutations去更新state数据；
• 第五步：state更新之后，通知vue进行渲染；

结语

本小节到此结束，谢谢大家的观看！

如有问题欢迎各位指正