側滑展開筆記

關於側滑展開

父組件：App.vue
A組件:navbar.vue(點擊控制側邊欄(B組件)的展開)
B組件:sidebar.vue
A組件template部分：

點擊執行方法showNav
export default{

methods:{
    showNav(){
        /*
        store存儲和dispatch
        dispatch：含異步操作，例如向後臺提交數據
        commit:同步操作,寫法：this.$store.commit('mutations方法名',值)
        */
        this.$store.dispatch("changeLeftNavState",true);
    }
}

}
B組件template部分：

點擊執行隱藏
/*
mapGetters輔助函數僅僅是將store中的getter映射到局部計算屬性.
*/
import {mapGetters} from "vuex";
export default {

computed:{
    ...mapGetters({
        show:"getLeftNavState"
    })
},
data(){
    return {
        menuList:[
            {name:'首頁',path:'/'},
            {name:'影片',path:'/film'},
            {name:'影院',path:'/cinema'},
            {name:'我的',path:'/login'},
            {name:'賣座網查詢',path:'/card'}
        ]
    }
},
methods:{
    //點擊隱藏
    hideNav(){
        this.$store.dispatch("changeLeftNavState",false);
    }
}

}
父組件App.vue：
<template>

<div id="app">
    <Navbar></Navbar>
    <Sidebar :show.sync="show"></Sidebar>
</div>

</template>
import Navbar from "@/components/navbar.vue";
import Sidebar from "@/components/sidebar.vue";
import {mapGetters} from "vuex";
export default{

components:{
    Navbar,
    Sidebar
},
data(){
   return {
       show:false
   } 
}

}
vuex的目錄結構：

actions.ts:

export const changeLeftNavState=({commit},isShow)=>{

commit('CHANGE_LEFTNAV_STATE',isShow)

}
getters.ts:

export const getLeftNavState=state=>state.leftNavState
mutation-type.ts:
export const CHANGE_LEFTNAV_STATE='CHANGE_LEFTNAV_STATE'

mutations.ts:

import {CHANGE_LEFTNAV_STATE} from './mutation-type'
const mutations={

//切換左側導航的顯示狀態
[CHANGE_LEFTNAV_STATE](state,isShow){
    state.leftNavState=isShow
}

}
export default mutations

index.ts
import * as actions from './actions'
import * as getters from './getters'
import mutations from './mutations'
const state={

leftNavState:false

}

export default{

state,
actions,
getters,
mutations

}

store.ts

import Vue from 'vue';
import Vuex from 'vuex';
import app from './vuex/modules/app'

Vue.use(Vuex);

export default new Vuex.Store({

modules:{
   app
},
state:{},
mutations:{},
actions:{}

})