Vue全家桶系列之Vuex(一)

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！