到底vuex是什么？

广告

Vue.js小书已经出版，尤小右做序推荐：http://www.ituring.com.cn/boo...
欢迎购买。
Swift iOS 小书 http://www.ituring.com.cn/boo...

正文

关于vuex类的新闻最近不少，看到眼热就去查了下资料，而后扯出来一堆flux、redux、state、state之类的概念，以及大型工程必要性之类的。看官方手册也是昏昏然。

然而，我仍是弄懂了!我准备从demo出发，以一样的一个最简单的demo，演示两种状况下的代码编写状况：

1. 单纯依赖于vue.js

2. 依赖vue.js，也使用了vuex技术

目的是经过对比引出vuex的概念、优点和劣势。也许这是目前最接地气的vuex的介绍吧：）。因此不管如何在了解vuex以前，你必须懂得vue.js(好像废话：）。如今开始。

假设一个微小的应用，有一个标签显示数字，两个按钮分别作数字的加一和减一的操做。用户界面看起来是这样的：

使用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>

我写的代码代码能够直接拷贝到你的html内而且打开执行，你能够不费多余的劲儿，就把应用跑起来，按按按钮，看看界面上的反应是否如你预期。

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

如今来看看，一样的demo app，使用vuex完成的代码的样子，再一次，以下代码不是代码片断，是能够贴入到你的html文件内，而且直接使用浏览器打开运行的。

<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@next脚本的依赖。这是固然的，由于你须要使用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 多是繁琐冗余的。确实是如此——若是您的应用够简单，您最好不要使用 Vuex。

关于

做者：刘传君

建立过产品，创过业。好读书，求甚解。
能够经过 1000copy#gmail.com 联系到我

出品

bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...
Vue.js小书 http://www.ituring.com.cn/boo...