Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单的说，vuex就是将组件中公用的状态全部抽出来，集中去管理，无论你是获取状态还是更改状态，都通过vuex来进行。
状态管理模式====》一个简单的 Vue 计数应用
new Vue({
// state
data () { return { count: 0 } },
// view
template: ` <div>{{ count }}</div> `,
// actions
methods: { increment () { this.count++ } }
})
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化
以下是一个表示“单向数据流”理念的极简示意：
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。
1、安装和注册vuex
npm install vuex --save-dev
安装完成之后在main.js中引用
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,//通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store访问到
components: { App },
template: '<App/>'
})
2、在src目录下添加vuex目录，新建store.js文件用来管理状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
age:19
},
mutations:{
showAge(state,msg){
state.age=msg
}
}
})
export default store
3、在组件中用this.$store.state.age获取这个状态
//一般会在组件的计算属性（computed）获取state的数据（因为，计算属性会监控数据变化，一旦发生改变就会响应）
例如：
<template>
<div><h3>{{mAge}}</h3> </div>
</template>
<script>
export default {
name : "components3",
computed : {
myAge (){ return this.$store.state.age; }
} }
</script>
4、修改状态this.$store.commit( 'showAge', this.msg );