Chapter 1：光速上手vuex

写在文前：由于篇幅限制，不想一篇文章写太长，所以拆分成两篇，本篇主写样式和结构，大家快速过一眼，直接看下一章也行。

网上有很多关于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。

最后编辑于：2019.03.09 21:44:16