Vuex到底是什么

Vuex到底是什么

现在在学习写一个工程的时候看到很多样例都用到了vuex，那么vuex究竟是什么?

从官网上说, Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态.

这个其实蛮难看懂。于是作者做了如下例子来说明，分别用纯vue和vue+vuex进行说明。

需求是，一个数字，然后两个按钮+/-。

纯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+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>

这里看到所有涉及到状态和计算都放到了store中，这样就可以在各个组件之间互相传递和共享了，解决了互相通讯的问题。

作者原文链接: 到底vuex是什么？