vuex 是一个专为 vue.js 应用程序开发的状态管理模式，在构建一个中大型单页应用中使用vuex可以帮助我们更好地在组件外部管理状态，我们知道组件之间是独立的，组件之间想要实现通信需要使用props或者bus，可以实现父子组件及兄弟组件之间的数据传送，如果一个项目中要使用很多组件之间的数据交换，我们再使用props就会变得杂乱不堪，还有一大堆的逻辑代码，不利于代码的维护。那么有没有更方便、更简洁的方法呢？我们能否把这些组件之间共享的数据给“拎”出来，能否在一定的规则下管理这些数据呢？有的，由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex

什么是vuex?

官方解释：

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

按我的理解，vuex是一个单例，类似于线程池、全局缓存、浏览器中的window对象等，他将所有组件的数据都拿出来放在一个叫store‘仓库’中，在需要用的时候，调用特有的方法进行存值和取值，vuex提供了五个属性：store，mutations，actions，getters，modules

在vue-cli中创建vuex

当我们使用vue-cli搭建项目时，使用npm install --save-dev vuex 把vuex添加到依赖,那么我们怎么使用vuex呢

通过store选项

vue-cli搭建成功，在src目录下会有一个main.js文件，main.js的主要作用是把项目中最顶层的app.vue组件挂载到DOM中，其他所有的组件都可以看做是app.vue的子组件。
在main.js中添加store

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

import store from './Store/index.js'

Vue.config.productionTip = false
Vue.prototype.$http = axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

src文件下新建一个Store文件夹，创建index.js文件

此例中我把五个属性写到了同一个文件中，如果项目中需要配置的vuex选项很多，可以把vuex的相关代码分割到不同模块中

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state = {
    
}
const mutations = {
    
}
const actions = {

}
const getters = {

}
const modules = {

}

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

将vuex实例挂载到vue原型链上

上述例子中我们引入axios时，不能用use方法，只能使用vue的原型链，因此，当我们要引用vuex模块时，原理同axios，需要在vue原型上引入。

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import vuex from 'vuex'
import store from './Store/index.js'

Vue.config.productionTip = false
Vue.prototype.$http = axios
Vue.use(vuex);
Vue.prototype.$store = new vuex.Store({
    state: {},
    getters: {},
    actions: {},
    mutations: {}
});
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})