文章目录
1.前言2.Vuex是什么？3.什么是集中式状态管理模式？4.什么情况下使用Vuex？它能帮我们解决什么问题？5.简单的例子1.前言
Vuex是一个很棒的状态管理库，它很简单并且非常好的与Vue集成，下面我们来开始学习Vuex!
2.Vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，状态分两种，一种是组件内部的状态，其实就是一个组件内使用的状态（data数据），另外一种是应用级别的状态，这里是多个组件共享的状态（数据）
3.什么是集中式状态管理模式？
在说集中式管理模式之前，我们可以先来想想常见的处理方式是怎样的，比如每个组件维护自身的数据和状态，把组件设想成一个单一的东西，一个组件包含了自身需要的数据,如果不同层级的组件共享一份数据，那么是不是每个组件都需要各自维护这份数据（是不是很麻烦），那么集中式状态管理模式则以一个全局单例模式管理应用的状态，类似于全局对象，就相当共享数据（状态）保存到一个全局对象中（管理多份状态），那么就只需要单独管理全局对象里面的状态就可以了，集中式状态管理的好处是多个状态分散在不同组件各个角落，每个 View 会有相对应的 Model 维护状态；而集中式管理模式则用于将分散于组件的状进行集中化管理，提供一个全局的 store 存储管理应用的状态。集中式的状态管理可以让整体的状态变化更加明晰
4.什么情况下使用Vuex？它能帮我们解决什么问题？
多个组件依赖于同一状态，就是组件间的数据共享，所谓共享指的是，同一份数据被多处组件使用，并且要保持一定程度的同步（比如其中一个组件改变这份状态，另外的组件也需要同步这个状态），Vuex 的状态管理存储是响应式的，就是当你的组件使用到了 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！
如果觉得《Vue全家桶系列之Vuex(一)》对你有帮助，请点赞、收藏，并留下你的观点哦！
