vue展示与隐藏侧边栏功能
navbar.vue
1 2 | <span class="sidebar"> </span> |
1 2 3 | closeSidebar() { this.$store.commit("user/CLOSE_SIDEBAR");}, |
stor中user.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | const user = { namespaced: true, state: { opened: localStorage.getItem('sidebarStatus') ? !!+localStorage.getItem('sidebarStatus') : true, }, mutations: { CLOSE_SIDEBAR: (state) => { state.opened = !state.opened if (state.opened) { localStorage.setItem('sidebarStatus', 1) } else { localStorage.setItem('sidebarStatus', 0) } }, }, getters: { opened: state => state.opened }}export default user |
sidebar.vue
1 |
1 2 3 4 5 6 7 | import { mapGetters } from "vuex";computed: { ...mapGetters("user", ["opened"]), isCollapse() { return !this.opened; }}, |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
