vuex初探

理解vuex

vuex是与redux类似的应用于vue应用程序的前端数据处理框架。vuex汲取了redux很多优秀的特性，比如说单一的状态树，通过dispatch一个action来更新状态树。同时由于vuex只是针对vue的，其本身与vue的契合度更高，也更加轻量，可以在不需要第三方库的情况下支持异步请求。

在vuex中存在几个重要的概念：
1.state： 与redux的state一样，是整个应用级别的状态树，即“single state tree”。
2.getters： 在组件内部获取state。
3.mutations： commit mutations是唯一更新state的方式。
4.actions：执行异步操作，分发mutainons。
5.modules：将前端的各个数据模块根据需要互相独立，防止在不断的迭代中，数据臃肿混乱。
仔细一看，和redux貌似没毛区别呢。。。
getters相当于connect
mutations相当于reducer

在vue中应用vuex

其实在vue中用vuex十分简单，总结起来主要就是两步：

1. 创建store

2. 在组件中挂在store

创建store

首先我们要生成一个store实例

import Vue from 'vue'
import Vuex from 'vuex'
import * as modules from './modules'
import actions from './action'
import * as getters from './getters'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules,
  actions,
  getters,
})

export default store

定义action

在action.js文件中定义了一个getData方法

export default {
  getData({ commit }) {
    commit('getCatalog')
  }
}

在action我们接受了commit方法，它会分发mutation，这里在组件中dispatch getData方法后，会分发到getCatalog的mutation中。
另外在action中，我们还可以调用异步的方法。

export default {
  async getData({ commit }) {
    commit('getCatalog', await getApiData())
  }
}

定义mutations

getApiData返回的结果会作为第二个参数被传入到mutation中,在mutation中我们可以修改state。

const state = {
  catalog: [],
}

const mutations = {
  getCatalog(state, response) {
    state.catalog = response.body.catalog
  }
}

export default {
  state,
  mutations,
}

根据需要定义getters

export const getCatalog = state => { return state.article.catalog }

在组件中挂在store

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import store from './vuex/store'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes,
})

new Vue({
  el: '#app',
  router: router,
  store,
})

好的大功告成。

在组件中调用dispatch，以及获取getters

<script type="text/javascript">
  import { mapGetters, mapActions } from 'vuex'
  export default {
    computed: mapGetters({
      catalog: 'getCatalog',
    }),
    methods: mapActions([
      "getData"
    ]),
    beforeMount () {
      this.$store.dispatch('getData')
    },
  }
</script>