vuex

一、什么是vuex？

• 在Vue中，多组件的开发给我们带来了很多的方便，但同时将项目规模变大时候，多个组件之间的数据通信和状态管理就显得难以维护了。而Vuex就此应运而生。将状态管理单独掕出来，应用同统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单项数据流的方式管理数据。用户界面负责触发动作（action）进而改变对应状态（state），从而反映到视图上。

  
  vuex-flow.png

二、Vuex的组成部分

• 完整的应用Vuex开发的结构应该是这样的：

  
  Vuex-complete.png

1. State

• State负责存储整个应用的状态数据，一般需要在使用的时候在根节点注入store对象，后期就可以使用this.$store.state直接获取状态

//store为实例化生成的
import store from './store'
 
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

这个store可以理解为一个容器，包含着应用中的state等。实例化生成store的过程是：

const mutations = {...};
const actions = {...};
const state = {...};
 
Vuex.Store({
  state,
  actions,
  mutation
});

后续在组件中使用的过程中，如果想要获取对应的状态你就可以直接使用this.$store.state获取，当然，也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去，如

//我是组件
import {mapState} from 'vuex'
 
export default {
  computed: mapState({
    count: state => state.count
  })
}

2. Mutations

Mutations 的中文意思是变化，利用它可以更改状态 ，本质就是用来处理数据的函数，其接受唯一的参数值state。store.commit(mutationName)是用来触发一个mutation的方法。需要记住的是，定义的mutation必须是同步函数，否则devtool中的数据将可能出现问题，使状态改变变得难以追踪。

const mutations = {
  mutationName(state) {
    //在这里改变state中的数据
  }
}

在组件中触发：

//我是一个组件
export default {
  methods: {
    handleClick() {
      this.$store.commit('mutationName')
    }
  }
}

或者使用辅助函数mapMutations直接将触发函数反射到methods上，这样就能在元素事件绑定上直接使用了。如：

import {mapMutations} from 'vuex'
 
//我是一个组件
export default {
  methods: mapMutations([
    'mutationName'
  ])
}

3. Actions

Action也可以用于改变状态，不过是通过触发mutations实现的，重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似，也是绑定在组件的methods上的。如果选择直接触发的话，使用this.$store.dispatch(actionName)方法。

//定义Actions
const actions = {
  actionName({ commit }) {
    //dosomething
    commit('mutationName')
  }
}

在组件中使用

import {mapActions} from 'vuex'
 
//我是一个组件
export default {
  methods: mapActions([
    'actionName',
  ])
}

4. Getters

有些状态需要做二次处理，就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

const getters = {
  strLength: state => state.aString.length
}
//上面的代码根据aString状态派生出了一个strLength状态

在组件中使用

import {mapGetters} from 'vuex'
 
//我是一个组件
export default {
  computed: mapGetters([
    'strLength'
  ])
}

5. Plugin

插件就是一个钩子函数，在初始化store的时候引入即可。比较常用的是内置的logger插件，用于作为调试使用。

import createLogger from 'vuex/dist/logger'
const store = Vuex.Store({
  ...
  plugins: [createLogger()]
})