Vuex初体验

最近写了一个小项目，涉及到众多vue组件里的数据传输。一直听闻大家说起vuex就是一个状态管理器，可以让组件之间的通信更加的简约和可维护，于是就看了一下vuex方面的东西。

目前只是理解了vuex的一些思路，但是在实践方面还有所欠缺。先把一些简单的demo做一下记录。

做一个只用vueJS的组件通信demo和一个利用了vuex做通信的demo进行对比。

仅仅使用vue

以下是一个简单的小程序，点击按钮加减号，数字就会跟随者进行加减变动。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
new Vue({
  el:'#app',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})
</script>

整个代码结构非常清晰，代码是代码，数据是数据，这也是我一直以来非常喜欢vue.js的重要原因。代码就是放在methods数组内的两个函数inc、dec，被指令@click关联到button上。而data内返回一个属性count，此属性通过绑定到标签p内。

使用vuex

同样的一个demo，如果用vuex的思想，是这样写的：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@next"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
      inc: state => state.count++,
    dec: state => state.count--
  }
})
const app = new Vue({
  el: '#app',
  computed: {
    count () {
        return store.state.count
    }
  },
  methods: {
    inc () {
      store.commit('inc')
    },
    dec () {
        store.commit('dec')
    }
  }
})
</script>

变化如下：

1. 新的代码添加了对vuex的依赖。
2. methods数组还是这两个方法，这和demo1是一样的；但是方法内的计算逻辑，不再是在函数内进行，而是提交给store对象。这是一个新的对象！
3. count数据也不再是一个data函数返回的对象的属性；而是通过计算字段来返回，并且在计算字段内的代码也不是自己算的，而是转发给store对象。再一次store对象。

换言之，之前在vue实例内做的操作和数据的计算现在都不再自己做了，而是交由对象store来做了。

store对象是Vuex.Store的实例。在store内有分为state对象和mutations对象，其中的state放置状态,mutations则是一个会引发状态改变的所有方法。正如我们看到的，目前的state对象，其中的状态就只有一个count。而mutations有两个成员，它们参数为state，在函数体内对state内的count成员做加1和减1的操作。

功能还是那些功能，现在引入了一个store对象，把数据更新的功能给揽过去，不再需要vue实例自己计算了，代价则是引入了新的概念和层次。

vuex解决了组件之间共享同一状态的麻烦问题。当我们的应用遇到多个组件共享状态时，会需要：

1. 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做法。

2. 来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱，通常会导致无法维护的代码。官网说：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，组件就都和store通讯了。问题就自然解决了。

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果不打算开发大型单页应用，使用 Vuex就会感到很繁琐。项目本身并不复杂，则使用一个store bus来进行运输就可以了。

最后，我在项目里还是弃用了vuex，因为真的本身的传输并没有那么多的层次和路线，只是一次子组件向父组件传输所有数据，然后父组件再分发给其他子组件的过程。

然后，这次学习vuex的过程却是值得的。