前言:百度了很多遍也没找到我想要的,那就自己写一个吧
项目:vite2+vue3+vuex+router4
写demo时遇到的一个小问题 希望能够帮到各位同僚
1.在vue页面中使用vuex
import { useStore } from 'vuex'
const store = useStore();
const login = ()=>{
//下面这行代码看不懂先去看看vuex文档
store.commit('glo/cutShowFull',true);
}
2.在vue-router4的全局守卫中使用vuex里的方法
不知道为何在router中使用1的方法是不行的
//store/index.js
import { createStore } from 'vuex'
import global from './global';
import student from './student'
// Create a new store instance.
const store = createStore({
modules: {
glo: global,
stu: student
}
})
//将store store 导出去
export function myStore () {
return store;
}
export default store;
//router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import {myStore} from '@/store/index'
const store = myStore();
const router = createRouter({
history: createWebHashHistory(),
routes: [
...路由
],
})
//路由全局前置守卫
router.beforeEach((to,from,next)=>{
//当前往登陆页的时候开启全屏 前往其他页面关闭全屏
if(to.name==='login'){
store.commit('glo/cutShowFull',true)
//在这里能用到store 的commit 那么其他方法也是能使用的 就不一一举例了
}else{
store.commit('glo/cutShowFull',false);
};
next()
})
export default router