vuex

关于vuex到底是什么，看到眼热就去查了下资料，然后扯出来一堆flux、redux、state、state之类的概念，以及大型工程必要性之类的，我只想说，整这么复杂干什么？走远了..

什么是vuex,作用又是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态 。这里的关键在于 集中式存储管理 。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了

简言之就是，当我们的应用遇到多个组件共享状态时解决这一问题的一个状态管理中间件

应用场景：

• 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
• 来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

  举例说明

  当我们需要制作一个加一，减一操作按钮的时候，用下面两个demo做一个演示

  未使用vuex

• 单纯依赖于vue.js

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

  整个代码结构非常清晰，代码是代码，数据是数据，代码就是放在methods数组内的两个函数inc、dec，被指令@click关联到button上。而data内返回一个属性count，此属性通过绑定到标签p内。从而可以动态的改为count的值。

  使用vuex

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

  <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') //执行store.inc放大
            },
            dec () {
                store.commit('dec')
            }
          }
      })
  </script>
  

  我们先看到有哪些重要的变化：

1. 新的代码添加了对vuex@next脚本的依赖。这是当然的，因为你需要使用vuex的技术，当然需要引用它
2. methods数组还是这两个方法，这和demo1是一样的；但是方法内的计算逻辑，不再是在函数内进行，而是提交给store对象！这是一个新的对象！
3. count数据也不再是一个data函数返回的对象的属性；而是通过计算字段来返回，并且在计算字段内的代码也不是自己算的，而是转发给store对象
4. store对象是Vuex.Store的实例。在store内有分为state对象和mutations对象，其中的state放置 状态 ,mutations则是一个会引发状态改变的所有方法。正如我们看到的，目前的state对象，其中的状态就只有一个count。而mutations有两个成员，它们参数为state，在函数体内对state内的count成员做加1和减1的操作。

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

用了vuex感觉更复杂了？

你的感觉没错，这就是为什么官网再次会提到Vuex构建大型应用的价值。 如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex 。

OVER