Vue ——使用Vuex控制右侧抽屉的开启与隐藏

store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    
    
  state: {
    
    
    show_sheet: false
  },
  mutations: {
    
    
	show_sheet(state, {
    
     show }) {
    
    
      state.show_sheet = show;
    },
  }
}

index.vue:

<template>
  <div>
	<v-card-title>配置 <a @click="show_sheet">(修改)</a></v-card-title>
	<Component
      :is="sheet_editor"
      type="edit"
      :allDatas="allDatas"
    />
  </div>
</template>

<script>	
import DetailA from "@/views/DetailA";
import DetailB from "@/views/DetailB";

const EDITORS = {
    
    
  DetailA,
  DetailB
};
export default {
    
    
	props:{
    
    
		allDatas:{
    
    
			type:Object
		}
	},
	data(){
    
    
		return {
    
    
			sheet_editor: null,
			type: null,
		}
	},
	created(){
    
    
		this.getCurIdData();
	},
	methods:{
    
    
		getCurIdData() {
    
    
      		this.type = this.allDatas.type;
    	},
    	show_sheet() {
    
    
	      this.sheet_editor = EDITORS[this.type];
	      setTimeout(() => this.$store.commit("show_sheet", {
    
     show: true }), 1);
	    },
	},
	watch: {
    
    
	    allDatas() {
    
    
	      this.getCurIdData();
	      this.getTree();
	    }
  	},
  	components: {
    
    
	    DetailA,
	    DetailB,
	  }
}



</script>