写在文前：由于篇幅限制，不想一篇文章写太长，所以拆分成两篇，本篇主写样式和结构，大家快速过一眼，直接看下一章也行。
网上有很多关于vuex的教程，大多讲得都很细，能够让小白轻松上手的，还是比较少。今天我给大家分享一下怎样快速上手vuex。在这里我就不去费口舌讲vuex是啥了，相信能看到这篇文章的，起码也是有所了解才搜索到的。
既然是快速上手，我们就挑最常用，也是最核心的知识点分享。
学vuex一般就是要先学state、getters、mutations和actions这四个核心概念。我们这里既然要快速上手，就直接挑state和mutations来分享。原因有二：
1、
getters个人感觉用得少，也可能是本人项目中基本没怎么用到吧；
2、学actions很简单，只要你会state和mutations，剩下的一点异步处理你自然也能很快上手。
先来看我们的demo：
aa.gif
如图，每一行是一个组件，每个组件有一个input输入框和一个按钮。上面的组件能够通过按钮点击实现两个input的数字同时增加；下面的组件中，按钮点击可以实现两个input的数字同时减少。另外，如果我们直接在input中修改数字，数字（咱先别讨论非数字的）也会随之改变。那么，我们动手吧！
<!-- App.vue(父组件) -->
<template>
<div id="app">
<a-com :dataNum="dataNum"></a-com>
<b-com :dataNum="dataNum"></b-com>
</div>
</template>
<script>
import ACom from '@/components/ACom'
import BCom from '@/components/BCom'
export default {
name: 'App',
components: {
ACom,
BCom
},
data(){
return {
dataNum: 10
}
}
}
</script>
上面是父组件的代码，我们不浪费时间写样式，它的作用就是引入两个子组件给我们在视图上观看。接下来是组件A的代码：
<!-- ACom.vue(组件A) -->
<template>
<div>
<input type="text" v-model="dataNum">
<button>按钮+</button>
</div>
</template>
<script>
export default {
props: ['dataNum']
}
</script>
<style scoped>
</style>
然后是组件B的：
<!-- BCom.vue(组件B) -->
<template>
<div>
<input type="text" v-model="dataNum">
<button>按钮-</button>
</div>
</template>
<script>
export default {
props: ['dataNum']
}
</script>
<style scoped>
</style>
可以看出，我们组件A和组件B的dataNum都是来自于父组件App.vue的，这时候，如果你修改了组件A的dataNum，想让组件B的dataNum也发生改变，不采用vuex的情况下，你基本职能$emit传给父组件，再由父组件传到组件B身上了。当然数据交互少且组件不多的情况下，这样做更快捷，但当处理的数据较多，需要发生数据变更的组件也较多时，你就得考虑vuex了，下一章我们直接上手vuex。
网友评论