1，首先我们来看最简单的vuex，来源于vuex官网：https://vuex.vuejs.org/zh/guide/

 

如上图，最简单的vuex只需要状态state和改变状态的方法mutations即可。改变状态的唯一方式就是提交(commit) mutation。

2， 下面我们再来看完整的vuex结构

文件夹结构如下

index.js文件，无疑是vuex的主要文件，在此文件中定义store

/*
vuex最核心的管理对象store
 */
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

可见new Vuex.Store中完整的有四个对象，state，mutation，actions，getters。下面我们逐个分析用处与用法。

 2.1 state

state是状态，可以理解为整个vuex的状态存储器，所有需要的状态都在这里定义，存储。通常为文件state.js

/*
状态对象
 */
export default {
  latitude: 40.10038, // 纬度
  longitude: 116.36867, // 经度
  address: {}, //地址相关信息对象
}

通常可通过this.$store获取，一般在computer中获取

state的辅助函数：mapState 

computed: {
      ...mapState(['address', 'userInfo']),
}

2.2  mutation

 commit mutation为改变state的唯一方法。再次引用官网的解释： 

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

通常mutations会有两个文件，一个用来定义事件类型常量 mutation-types.js ，另一个用来定义回调函数 mutations.js。

mutation-types.js

/*
包含n个mutation的type名称常量
 */
export const RECEIVE_ADDRESS = 'receive_address' // 接收地址

mutations.js

/*
直接更新state的多个方法的对象
 */
import Vue from 'vue'
import {
  RECEIVE_ADDRESS,
} from './mutation-types'

export default {
  [RECEIVE_ADDRESS] (state, {address}) {
    state.address = address
  },
}

使用方式如下：（第二个参数为自定义参数）

$.store.commit(RECEIVE_ADDRESS, {address})

同样的mutations也有辅助函数 mapMutations 

那么需要注意的是：在 Vuex 中，mutation 都是同步事务。

那么如何处理异步操作呢？这就是action的作用。

2.3  action

Action 类似于 mutation，不同在于：

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

/*
通过mutation间接更新state的多个方法的对象
 */
import {
  RECEIVE_ADDRESS,
} from './mutation-types'
import {
  reqAddress,
} from '../api'

export default {
  // 异步获取地址
  async getAddress({commit, state}) {
    // 发送异步ajax请求
    const geohash = state.latitude + ',' + state.longitude
    const result = await reqAddress(geohash)
    // 提交一个mutation
    if (result.code === 0) {
      const address = result.data
      commit(RECEIVE_ADDRESS, {address})   //提交mutation
    }
  },

使用方法（利用dispations分发action）：

 mounted () {
      this.$store.dispatch('getAddress')
    },

也可利用辅助函数：

 mounted () {
      // this.$store.dispatch('getAddress')
      this.getAddress()
    },

    methods: {
      ...mapActions(['getAddress'])
    },

 store.dispatch 仍旧返回 Promise。

2.4 getter

getter为store的“计算属性”，可根据state计算出一些需要的数据

getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

getter的具体使用可见官网：https://vuex.vuejs.org/zh/guide/getters.html

3，看下整体流程图