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!