对于状态管理，有现成的vuex和redux等框架，能方便我们的开发，但在使用这些框架的时候，还是有必要先了解下什么是状态管理。简单来说状态管理就是对应用中各变量的增删改查进行的管理，随着 SPA （单页面应用）被广泛使用，整个应用的数据，状态都散落在不同的变量中，有时候同一变量将在不同的组件中展示，当某个页面中修改了该变量后，同时需要修改该变量在其它组件上的值，修改后将重新渲染其它视图组件。通过flux也能快速的理解状态管理，flux的核心就是一个简单的约定，视图层不允许直接修改应用的状态，需要通过触发action，然后将action流到store上，由于应用的状态是通过store来管理的，当action流到store后，store再对状态进行更改，然后store再触发组件进行修改。

状态管理框架

前端状态管理框架用的最多的主要是vuex和redux，这两种框架的思想都差不多，下面对这两种框架进行简单的介绍。

redux

Redux是javascript的一个状态管理容器，通过Redux可提供可预测性的状态管理。先看下Redux的流程，然后再通过流程图来看Redux中的一些核心概念和使用流程。

redux流程图.jpg
由图片可看出，主要由Action,Store,Reducers组成。组件端将Action转发到Store,Store再将状态值和Action传递给Reducers进行处理，处理完成后，将新的状态值再传递给Store，再对组件进行重新渲染。

Action

Action是将数据从应用传递到Store，并且action是store数据的唯一来源。一般需要使用store.dispatch()将数据从action传递到store，如下所示：

let action = {
  type: 'ADD_TODO',
  text: 'Build my first Redux app'
}
dispatch(action)

Action一般传递的类型为对象，将出要更改的数据封装成对象后，然后再通过dispatch来发送数据。

Reducers

Reducers指定了应用状态的变化如何响应actions并发送到store，只是记录了actions有事件要发生，并没有描述应用如果更新到store。reducer是一个纯函数，用于接收旧的action和state,返回新的state。如下所示：

function todoApp(state, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

这里Object.assign的第一个参数为一个空对象，是为了防止修改state，使用assign直接将两个对象的值合并到空对象上。

Store

Store的作用是将Reducers和Actions关联到一起，Store的主要职责如下所示：

• 维持应用的state，相当于保存一个全局变量。
• 提供getState()获取state。
• 提供dispatch(action)更新action。
• 通过subscribe(listener)注册监听。
• 通过subscribe(listener)返回的函数注销监听器。

vuex

vuex是一个专门为vue.js设计的一个状态管理框架，它采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式改变状态。概念跟redux差不多，都是提供可预测性的状态管理方式。其流程图如下所示：

vuex流程图.png

如图所示，vuex的核心主要包括actions,mutations, state三部分，由图也可以看出整个流程中的数据是单向流动的，组件派发actions后，将actions提交给mutations，通过mutations再对状态进行修改，修改完状态后再重新渲染组件。在整个过程中，只能通过mutations来修改state的值，不能手动修改state的值。

state

vuex中是使用单一的状态树来管理种状态值的。每个应用只包含一个 store 实例，相当于一个顶层的单例模式。然后将应用的各个状态保存在state上，如果要获取一个状态，使用下面的方式进行获取：

this.$store.state.xxx

getter

在vuex中可以使用getter来过滤一些状态值。如下所示，在getters中添加了一个doneTodos函数，来获取todos数组中done属性值为true的。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

其后再通过store.getters.doneTodo来获取。

Mutation

更改store中状态的唯一方法是提交mutation。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，如下所示：

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

只能通过store.commit('increment')来调用。

Action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
  如下所示：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 通过store.dispatch 方法触发：

store.dispatch('increment')

通过简单的对比了vuex和redux的状态管理，其核心思想都差不多，都是借助于flux的思想用于管理数据的状态。
个人博客