快速上手VueX

原创

爱划水de鲸鱼哥 2022-11-10 23:07:39 ©著作权

文章标签 工作流程流程图数据源 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者爱划水de鲸鱼哥的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

本文主要介绍了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: {
      }
    })