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,
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 );