侧滑展开笔记

关于侧滑展开

父组件：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:{}

})