Vue全家桶系列之Vuex(一)

文章目录

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！