文章目录 1.前言2.Vuex是什么？3.什么是集中式状态管理模式？4.什么情况下使用Vuex？它能帮我们解决什么问题？5.简单的例子
1.前言
Vuex是一个很棒的状态管理库，它很简单并且非常好的与Vue集成，下面我们来开始学习Vuex!
2.Vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，状态分两种，一种是组件内部的状态，其实就是一个组件内使用的状态（data数据），另外一种是应用级别的状态，这里是多个组件共享的状态（数据）
3.什么是集中式状态管理模式？在说集中式管理模式之前，我们可以先来想想常见的处理方式是怎样的，比如每个组件维护自身的数据和状态，把组件设想成一个单一的东西，一个组件包含了自身需要的数据,如果不同层级的组件共享一份数据，那么是不是每个组件都需要各自维护这份数据（是不是很麻烦），那么集中式状态管理模式则以一个全局单例模式管理应用的状态，类似于全局对象，就相当共享数据（状态）保存到一个全局对象中（管理多份状态），那么就只需要单独管理全局对象里面的状态就可以了，集中式状态管理的好处是多个状态分散在不同组件各个角落，每个 View 会有相对应的 Model 维护状态；而集中式管理模式则用于将分散于组件的状进行集中化管理，提供一个全局的 store 存储管理应用的状态。集中式的状态管理可以让整体的状态变化更加明晰
4.什么情况下使用Vuex？它能帮我们解决什么问题？多个组件依赖于同一状态，就是组件间的数据共享，所谓共享指的是，同一份数据被多处组件使用，并且要保持一定程度的同步（比如其中一个组件改变这份状态，另外的组件也需要同步这个状态），Vuex 的状态管理存储是响应式的，就是xxdmht的组件使用到了 Vuex 的某个状态，一旦它发生改变了，所有关联的组件都会自动更新相对应的数据。所以这个时候用 vuex 来统一管理这些组件的状态，会让逻辑更清晰，更可维护！
5.简单的例子可能上面说的还是由点懵！下面来说下例子，不使用Vuex是怎么玩的，有多么的复杂！ 场景：有个App组件（root组件），parent组件,child组件,GrandSon组件，GrandSon1组件，改变GrandSon组件或者GrandSon1组件数据，所有的组件数据都需要变更！
app.vue（根组件）的代码：
//app.vue<template> <div id="app"> <Parent :root-number="num" @rootNumber="changRootNumber"></Parent> </div></template><script>import Parent from "./components/Parent";export default { name: "App", components: { Parent, }, data() { return { num: 100, }; }, methods: { changRootNumber(value) { this.num = value; }, }};</script>parent.vue（父组件）的代码：
//parent.vue<template> <div> <h2>parent组件的number值：{{ num }}</h2> <Child :parent-number="num" @parentNumber="changParentNumber"></Child> </div></template><script>import Child from "./Child";export default { name: "Parent", props: ["rootNumber"], components: { Child, }, computed: { num() { return this.rootNumber; } }, methods: { changParentNumber(value) { this.$emit("rootNumber", value); }, },};</script>Child.vue（儿子组件）的代码：
//Child.vue<template> <div> <h2>child组件的number值：{{ num }}</h2> <GrandSon :child-number="num" @childNumber="changChildNumber"></GrandSon> <GrandSon1 :child-number="num" @childNumber="changChildNumber"></GrandSon1> </div></template><script>import GrandSon from "./GrandSon";import GrandSon1 from "./GrandSon1";export default { name: "Child", props: ["parentNumber"], components: { GrandSon, GrandSon1 }, computed: { num() { return this.parentNumber; } }, methods: { changChildNumber(value) { this.$emit("parentNumber", value); }, },};</script>GrandSon.vue 和 GrandSon1.vue（孙子组件）的代码：
//GrandSon.vue GrandSon1.vue 一样的代码<template> <div> <h2>GrandSon组件的number值：{{ num }}</h2> <button @click="addNumber">点击我改变number值</button> <button @click="substractNumber">点击我改变number值</button> </div></template><script>export default { name: "GrandSon1", props: ["childNumber"], computed: { num() { return this.childNumber; } }, methods: { addNumber() { this.$emit("childNumber", this.num + 5); }, substractNumber() { this.$emit("childNumber", this.num - 5); } },};</script></script>组件与组件每层通过prop传值，并且当GrandSon改变数据时还需要每层派发事件一直到app组件，这样是不是很复杂，并且很难维护，看下效果
如果使用Vuex来集中管理状态，将变得非常的简单，并且代码很清晰，很容易维护！下一篇文章介绍如何使用Vuex！