#redux vuex

react和vue作为目前前端非常流行的两大框架，而redux和vuex分别是这两大框架会用到的状态管理库，在学习了redux后，是非常有必要与vuex做一下对比。vuex背后的基本思想，借鉴了redux等库，但是又有所不同，vuex是专门为vue设计的状态管理库，以利用vue的响应机制来进行高效的状态更新。所以如果既用过redux也用过vuex，那就会发现它们之间那么的相似，用起来又有所不同。

1、状态

redux和vuex作为状态管理库，都维护着应用的状态（即state）。但是从使用者定义state的方式来看，完全是不一样等。

在redux里面，state是通过reducer的返回值来确定的，所以是需要分析reducer才能看出它的结构。而vuex里面，state是直接可以定义的。

import Vuex from 'vuex'
const store = new Vuex.Store({
    state: {
        visibilityFilter: 'SHOW_ALL',
        todos: [],
    },
})

从这一点来看，虽然都是state，但是vuex的阅读性和维护性更好。所以，我们会看到基于redux基础上的库dva，也采用了vuex的这种方式。

2、获取状态

redux中获取状态通过store.getState()方法来获取。而在vuex中，通过store.state.xxx的形式直接获取。并且vuex还提供了getter的方式来派生出一些状态，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

// vuex的getter
getters: {
    visibilityFilter (state) {
        return state.visibilityFilter
    }
}

3、更改状态

redux里面能够更改state是reducer，vuex里面更改state的是mutation，从定义上是不一样的。reducer里面，接收上一次的state和action，返回新的state。而在vuex的mutation里面，会接收state和一个额外的参数，然后直接修改state状态，这一点是利用了vue的特性，所以vuex显得更加灵活一些。

// reducer示例
function visibilityFilter(state = 'SHOW_ALL', action) {
    switch (action.type) {
        case 'SET_VISIBILITY_FILTER':
            return action.filter
        default:
            return state
    }
}
// mutation示例
mutations: {
    setVisibilityFilter (state, { filter }) {
        state.visibilityFilter = filter
    },
}

4、Action

redux的action是数据从应用到store的有效载何。redux自身只能处理带type属性的object形式的Action，需要支持其他方式的Action（如function、promise）需要通过中间件的方式集成进去。而vuex的action，设计上就是用来处理异步的情况，而不是一个载何，而要更改state还需要在action里面commit一个mutation。

// redux Action示例
// 更改过滤条件
export function setVisibilityFilter(filter) {
  return { type: 'SET_VISIBILITY_FILTER', filter }
}
// vuex Action示例
actions: {
    initTodos ({ commit }) {
        getTodos().then((data) => {
            commit('initTodos', {
                list: data.list,
            })
        })
    }
}

5、结合其他库使用

在结合其他库使用方面，redux其实是不依赖于任何库的，所以它的用途也更广，可以和vue、Angular、Ember、jQuery 甚至纯JavaScript结合使用。不过要和其他库搭配，可能需要做一些工作，比如引入一些其他的库，比如redux和react搭配就会引入”react-redux”。
而vuex本身设计就是为vue做状态管理，vuex作为vue的一个plugin而存在，只能用在vue中，用途较窄。

6、结语

以上是在使用redux和vuex过程中，发现它们的一些不同。在此记录下来，即使认识有偏差，也方便日后修改。

#redux vuex