vuex浅入浅出

什么是Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex采用和Redux相似的单向数据流的方式来管理数据。用户界面负责触发动做（Action)进而改变对应状态（State），从而反映到视图（View）上。

new Vue({
      el: "#app",
      //state 驱动应用的数据源
      data () {
        return { count: 0 }
      },
      //view 以声明方式将 state 映射到视图；
      template: '<div @click="increment">{{ count }}</div>',
      //actions 响应在 view 上的用户输入致使的状态变化。
      methods: {
        increment () {
          this.count++
        }
      }
    })

什么是“状态管理模式”？

让咱们从一个简单的 Vue 计数应用开始：

const store = new Vuex.Store({
      //有哪些状态
      state: {
        count: 0
      },
      actions: {
        incrementAction (store) {
          store.commit('increment')
        }
      },
      //改变，能够经过调用这个改变的方法来修改state的值
      mutations: {
        increment (state) {//这里面的方法的第一个就是state，咱们能够直接修改
          state.count++
        }
      }
    })

这个状态自管理应用包含如下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入致使的状态变化

可是，当咱们的应用遇到多个组件共享状态时，
单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。

• 来自不一样视图的行为须要变动同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会很是繁琐，而且对于兄弟组件间的状态传递无能为力。对于问题二，咱们常常会采用父子组件直接引用或者经过事件来变动和同步状态的多份拷贝。以上的这些模式很是脆弱，一般会致使没法维护的代码。
所以，咱们为何不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，咱们的组件树构成了一个巨大的“视图”，无论在树的哪一个位置，任何组件都能获取状态或者触发行为！
另外，经过定义和隔离状态管理中的各类概念并强制遵照必定的规则，咱们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想.

什么状况下我应该使用 Vuex？

虽然 Vuex 能够帮助咱们管理共享状态，但也附带了更多的概念和框架。这须要对短时间和长期效益进行权衡。
若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。确实是如此——若是您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。可是，若是您须要构建是一个中大型单页应用，您极可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为天然而然的选择。

Vuex图解

Backend API: 后端的API
Actions：行为，响应在 view 上的用户输入致使的状态变化。
Mutations: 突变，mutations, 通俗的理解，里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法所有放在mutations里面，使得数据和视图分离。
State: Vuex 使用单一状态树——是的，用一个对象就包含了所有的应用层级状态。至此它便做为一个“惟一数据源 (SSOT)”而存在。这也意味着，每一个应用将仅仅包含一个 store 实例。
Vue Components: Vue的组件
Devtools: 工具
Mutate: 变异，至关于修改
Render: 提供，响应

Commit的问题
**为何不能直接调用mutation方法，而是必须得经过commit来提交mutation呢？
官方解释道：
更改 Vuex 的 store 中的状态的惟一方法是提交 mutation。Vuex 中的 mutations 很是相似于事件：每一个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是咱们实际进行状态更改的地方，而且它会接受 state 做为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变动状态
      state.count++
    }
  }
})

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你须要以相应的 type 调用 store.commit 方法：store.commit('increment')

VueComponents—{Dispatch (传入)}—>Actions—{Commit (提交)}-->Mutations—{Mutate(修改)}—>State—{Render(响应)}-->VueComponents

State: 至关于组件里面的data，是用来存放数值。
Getter: 至关于vue里面的computed
Actions: 至关于vue里面的methods

const store = new Vuex.Store({
      //有哪些状态
      state: {
        count: 3
      },
      // 至关于state的计算属性
      getters: {
        evenOrOdd: state => {
          return state.count % 2 === 0 ? 'even' : 'odd'
        }
      },
      actions: {// 能够包含异步的代码
        incrementAction (store, amount) {
          store.commit('increment', amount)
        },
        decrement ({ commit }) {
          commit('decrement')
        }
      },
      //改变，能够经过调用这个改变的方法来修改state的值
      mutations: {
        increment (state, amount) {//这里面的方法的第一个就是state，咱们能够直接修改
          state.count += amount
        },
        decrement (state) {
          state.count--
        }
      }
    })

    var app = new Vue({
      el: "#app",
      computed: {
        counter () {
          return store.state.count
        },
        evenOrOdd () {
          return store.getters.evenOrOdd
        }
      },
      methods: {
        add () {
          store.dispatch('incrementAction', 5)
        },
        decrement () {
          store.dispatch('decrement')
        }
      }
    })