feat:更新Vuex状态管理

src/App.vue

@@ -5,8 +5,10 @@
 		<Header></Header>
 		<!-- 路由出口 -->
 		<router-view></router-view>
-    <Home></Home>
 		<Footer></Footer>
+
+		<!-- 登录 -->
+		<Login v-show="isShowLoginModal"></Login>
 	</div>
 </template>
 
@@ -15,16 +17,27 @@
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import TopBar from "./components/TopBar";
-import Home from "./views/Home";
+import Login from "./components/Login";
+import { mapState } from "vuex";
 
 export default {
+	data() {
+		return {};
+	},
 	name      : "App",
 	//注册组件
 	components: {
 		TopBar,
 		Header,
 		Footer,
-		Home
+		Login
+	},
+	// 计算属性
+	computed: {
+		...mapState({
+			isShowLoginModal: (state) =>
+				state.isShowLoginModal.isShowLoginModal
+		})
 	}
 };
 </script>

src/components/Header.vue

@@ -6,19 +6,34 @@
 		<!-- 导航与搜索 -->
 		<div class="nav">
 			<ul>
-				<li class="active">
+				<li
+					@click="$router.push('/home')"
+					:class="$route.path === '/home' ? 'active' : ''"
+				>
 					首页
 				</li>
-				<li>
+				<li
+					@click="$router.push('/goods')"
+					:class="$route.path === '/goods' ? 'active' : ''"
+				>
 					全部商品
 				</li>
-				<li>
+				<li
+					@click="$router.push('/user')"
+					:class="$route.path === '/user' ? 'active' : ''"
+				>
 					个人中心
 				</li>
-				<li>
+				<li
+					@click="$router.push('/order')"
+					:class="$route.path === '/order' ? 'active' : ''"
+				>
 					我的订单
 				</li>
-				<li>
+				<li
+					@click="$router.push('/free')"
+					:class="$route.path === '/free' ? 'active' : ''"
+				>
 					专属福利
 				</li>
 			</ul>

src/components/Login.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="login-modal">
+		<div class="mask" @click="this.close"></div>
+		<div class="login-box"></div>
+	</div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+export default {
+	methods: {
+		...mapMutations({setIsShowLoginModal: "isShowLoginModal/setIsShowLoginModal"}),
+		close() {
+			this.setIsShowLoginModal(false);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.login-modal {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	.mask {
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.5);
+	}
+	.login-box {
+		width: 555px;
+		height: 423px;
+		background-image: url(../assets/img/login-box-bg.png);
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
+}
+</style>

src/components/TopBar.vue

@@ -11,15 +11,25 @@
 					<li>我的鸡腿：--</li>
 					<li>获取鸡腿</li>
 					<li>叩丁狼官网</li>
-					<li class="btn">登录</li>
+					<li class="btn" @click="login">登录</li>
 				</ul>
 			</div>
 		</div>
 	</nav>
 </template>
 
 <script>
-export default { name: "TopBar" };
+import { mapMutations } from "vuex";
+export default {
+	name   : "TopBar",
+	methods: {
+		...mapMutations({setIsShowLoginModal: "isShowLoginModal/setIsShowLoginModal"}),
+		login() {
+			// 触发登录弹窗
+			this.setIsShowLoginModal(true);
+		}
+	}
+};
 </script>
 
 <style scoped lang="scss">

src/router/index.js

@@ -39,7 +39,7 @@ VueRouter.prototype.replace = function(location, resolve, reject) {
 };
 
 
-let router = new VueRouter({
+export default  new VueRouter({
 	routes,
 	scrollBehavior() {
 		return { y: 0 };
@@ -48,5 +48,3 @@ let router = new VueRouter({
 	mode: "history"
 });
 
-
-export default router;

src/router/routes.js

@@ -2,31 +2,40 @@ export default [
 	//重定向
 	{
 		path    : "/",
-		redirect: ""
+		redirect: "Home"
+	},
+	//首页组件
+	{
+		path     : "/home",
+		component: () =>
+			import(/* webpackChunkName: "home" */ "@/views/Home"),
+		name: "home"
+	},
+	//全部商品组件
+	{
+		path     : "/goods",
+		component: () =>
+			import(/* webpackChunkName: "goods" */ "@/views/Goods"),
+		name: "goods"
+	},
+	//个人中心组件
+	{
+		path     : "/user",
+		component: () => import(/* webpackChunkName: "user" */ "@/views/User"),
+		name     : "user"
+	},
+	//订单组件
+	{
+		path     : "/order",
+		component: () =>
+			import(/* webpackChunkName: "order" */ "@/views/Order"),
+		name: "order"
+	},
+	//free
+	{
+		path     : "/free",
+		component: () =>
+			import(/* webpackChunkName: "free" */ "@/views/Free"),
+		name: "free"
 	}
-	// //导入登录组件
-	// {
-	// 	path     : "/login",
-	// 	component: () =>
-	// 		import(/* webpackChunkName: "login_home_welcome" */ "@/components/Login"),
-	// 	name: "login"
-	// },
-	// //导入主页组件
-	// {
-	// 	path     : "/home",
-	// 	component: () =>
-	// 		import(/* webpackChunkName: "login_home_welcome" */ "@/components/Home.vue"),
-	// 	name    : "home",
-	// 	redirect: "/welcome",
-	// 	children: [
-	// 		{
-	// 			//导入欢迎组件
-	// 			path     : "/welcome",
-	// 			component: () =>
-	// 				import(
-	// 					/* webpackChunkName: "login_home_welcome" */ "@/components/Welcome"
-	// 				),
-	// 			name: "welcome"
-	// 		},
-	// }
 ];

src/store/index.js

@@ -1,12 +1,7 @@
-import Vue from "vue"
-import Vuex from "vuex"
+import Vue from "vue";
+import Vuex from "vuex";
+import isShowLoginModal from "@/store/isShowLoginModal";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
-export default new Vuex.Store({
-	state    : {},
-	getters  : {},
-	mutations: {},
-	actions  : {},
-	modules  : {}
-})
+export default new Vuex.Store({modules: {isShowLoginModal}});

src/store/isShowLoginModal/index.js

@@ -0,0 +1,10 @@
+export default {
+	namespaced: true,
+	actions   : {},
+	mutations : {
+		setIsShowLoginModal(state, isShowLoginModal) {
+			state.isShowLoginModal = isShowLoginModal;
+		}
+	},
+	state: { isShowLoginModal: false }
+};

src/views/Free.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+asdfasedfd
+    </div>
+</template>
+
+<script>
+export default {
+	name: "User",
+	data() {
+		return {};
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/Goods.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/Order.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/User.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+
+</style>