学习笔记：Vuex及Vuex模块化

目录

一.什么是Vuex?

二.安装vuex（）

三.Vuex原理及流程

1 state

 2 Actions 和 Mutations

 3 getters(图上没有展示)

 4 dispatch和commit

四 .4个重要API

1 mapState

 2 mapGetters

  4 mapMutations

五 module

---

一.什么是Vuex?

Vuex就是一个仓库，用来集中化管理所有组件的状态，并且能够完成任意组件间的数据共享，他就像一个公用的大仓库，包含了所有组件的数据，可以供任意组件使用，虽然过程有些繁琐，但是搭建好之后会让你的思路国家顺畅，结构更加清晰，最重要的是代码会易于维护。

二.安装vuex（）

1. npm i vuex@'版本号'====>这里大家一定要注意，下载vuex一定要下在对应vue版本的，即 vue2----vuex3 Vue3---vuex4

2. yarn add vuex@'版本号'.

3 不建议用CDN哦

三.Vuex原理及流程

这张图是Vue官方给的原理图，不难看出Vuex主要包括State Mutations Action三部分，以及与之进行交互的方法，深入理解这幅图对于学习Vuex是很有必要的。

1 state

state是我们创建store（store是我们借助Vuex创建出的实例对象，可以理解为大仓库）实例对象里的唯一一个包含了所有基本参数 的构造器（官网称为单一状态树）。例如在store文件（store文件夹一般用来搭建Vuex环境，后面会讲到）的state里设置几个参数：

state:{
        sum: 0,
        school: '121大学',
        course: '前端', 
    },

现在我在任意一个子组件中打印：console.log(this.$store.state);

state: Object
    sum: 0
    course: "前端"
    school: "121大学"

我们可以看到state里所有的参数都打印出来了，并且任意一个组件都可以使用。

2 Actions 和 Mutations

action本身就有行为的意思，我是直接理解为行为处理器（好理解）的。可以看从VC出发有根dispatch的指向线指向Actions