Whbbit 博客开发日记

08.04-00:04

完成了whbbit后台使用quasar 的YouTube预制模版完成了后台管理界面的修改。此次使用quasar和vue3 更加加深了印象。遇到一些问题如下：

1. 在vue3中使用route

   • 需要先引入

   import { useRouter } from 'vue-router'
   

   • 在setup函数中使用

   setup () {
   	const router = useRouter()
   	// 点击logo去首页的方法
   	const toHome = () => {
   		router.push('/')
   	}
   	return {
   		toHome
   	}
   }
   

2. 使用vuex

   • 需要先引入vuex

     import $store from './store/index' 
     

   • 在需要使用时使用

     const toggleLeftDrawer  = () => {
     	$store.commit('changeLeftDrawerState')
     }
     

   • store/index

     import { createStore } from 'vuex'
     
     export default createStore({
       state: {
         leftDrawerOpen : true,
       },
       mutations: {
         changeLeftDrawerState (state) {
           state.leftDrawerOpen = !state.leftDrawerOpen
         }
       },
       actions: {  
       },
       modules: {
       }
     })
     
     

   • 在aside/index.vue中使用

     import $store from '../../store/index'
     export default {
       setup () {
         const leftDrawerOpen = ref(true)
         watchEffect(() => {
           $store.state.leftDrawerOpen
             ? (leftDrawerOpen.value = true)
             : (leftDrawerOpen.value = false);
         })
         return {
           leftDrawerOpen
         }
       }
     }