Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

核心概念

State ： 唯一数据源

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

Mutation： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

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

Module：Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

使用方法

store/	store/modules	store/modules/user

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'

import newstock from './modules/newstock/index'
import user from './modules/user/index'
import recommend from './modules/recommend/index'
import homepage from './modules/homepage/index'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    newstock,
    user,
    recommend,
    homepage,
  },
  plugins: process.env.NODE_ENV !== 'production'
    ? [createLogger()]
    : []
})

store/modules/index.js

import userinfo from './UserInfo';

// initial state
const state = {
  ...userinfo.state,
}

// getters
const getters = {
  ...userinfo.getters,
}

const actions = {
  ...userinfo.actions,
}

// mutations
const mutations = {
  ...userinfo.mutations,
}

export default {
  state,
  getters,
  actions,
  mutations
}

store/modules/UserInfo.js

import api from '../../../api/api'
import * as types from '../../mutation-types'

// initial state
const state = {
  userinfo:{}
}
// 使用
// computed: mapState({
//     userinfo: state => state.user.userinfo
// })
// getters
const getters = {
  userinfo: state => state.userinfo,
}

// 使用
// methods: {
//     ...mapActions({
//         getHomepageIndex: types.HOMEPAGE_INDEX_ACTION,
//         getUserInfo: types.USER_INFO_ACTION,
//     }),
//     ...
// }
const actions = {
  [types.USER_INFO_ACTION] ({ commit ,state}, queryCondition={}) {
    return new Promise((resolve, reject) => {
      commit(types.USER_INFO_REQUEST);
      api.get(
        process.env.NODE_ENV !== 'production'
          ?`测试地址`   
          :`生产地址`,
        (payload) => commit(types.USER_INFO_SUCCESS, payload),
        (payload) => commit(types.USER_INFO_FAILURE, payload),
        resolve,
        reject
      )
    })   
  }

}

// mutations
const mutations = {
  [types.USER_INFO_REQUEST] (state) {
    state.userinfo = {
      ...state.userinfo,
      loading: true,
      status: 0
    }

  },

  [types.USER_INFO_SUCCESS] (state, payload) {


    state.userinfo = {
      ...state.userinfo,
      ...payload,
      loading: false,
      status: 0
    }
  },

  [types.USER_INFO_FAILURE] (state, payload) {
    state.userinfo = {
      ...state.userinfo,
      loading: false,
      status: 1,
    }
  },
}

export default {
  state,
  getters,
  actions,
  mutations
}