Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
在项目中用到了全屏，但是全屏后，主页中的表格没有重新计算高度，而全屏这个功能又是写在子组件当中，所以考虑用vuex，在state里定义高度这个变量。
第一步，是要npm install vuex。
第二步，main.js文件里：
import Vuex from 'vuex';
import store from './store';
Vue.use(Vuex);
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
第三步，建立store文件夹，建立index.js文件：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
height:''
};
const mutations ={
figure:state =>{
state.height=parseInt(document.body.clientHeight) - 180;
console.log("figure",state.height)
}
};
const actions={
figure:context=>{
context.commit({type:'figure'})
}
}
// 创建 store 实例
export default new Vuex.Store({
state,
mutations,
actions,
})
第四步，分发actions
<Table border class="table_tb" :height="height" :columns="columns12" :data="data6">
mounted(){
this.dispatch();
},
computed:{
height（）{ //height就是定义的变量
return this.$store.state.height;//计算属性会将数据进行缓存，数据变化后就将数据动态返回
}
},
methods:{
dispatch(){
this.$store.dispatch('figure');
}
}
第五步，在子组件页面，也需要重新计算高度，所以也需要分发actions
methods:{
handleChange () {
this.handleFullscreen();
setTimeout(() => {//异步等待全屏函数执行完，再执行此代码
this.$store.dispatch('figure');
}, 100);
}
}
