Vue第五篇：电商网站登录时vuex的使用

页面：

代码资源见：https://download.csdn.net/download/benben044/88071987

其中css使用开源库的UI，Main里面的元素是一张截图。

通过vue@cli脚手架生成的代码架构如下：

一、入口组件App.vue解析

主页面主要由两部分组成：Top组件的内容以及路由的出口显示信息。

<template>
  <div id="app">
    <Top/>
    <router-view/>
  </div>
</template>

<script>
  import Top from '@/components/Top'
  export default {
    name: 'app',
    components:{
      Top
    }
  }
</script>

<style>
  @import "./assets/css/basic.css";
  @import "./assets/css/demo.css";
</style>

二、Top组件

1、组件输出

name为top-home，其他组件中可以通过vue.$router.push({name: 'top-home'})到当前组件。

2、computed计算属性中定义了两个变量，这两个变量等于vuex状态的同名变量。

3、methods中比较特殊的是logoutAction函数，它的外面由mapActions包裹着。这个等价于：

logoutAction:function(){

      this.$store.dispatch('logoutAction')

}

<script>
import {mapState, mapActions} from 'vuex'
export default {
  name: 'top-home',
  computed: {
    ...mapState([
        'user',
        'isLogin'
    ])
  },
  methods: {
    show: function(value){
      if(value == 'shopcard'){
        if(this.user == null){
          alert('亲，请登录！');
          this.$router.push({name: 'login-home'});
          return false;
        }
      }
      this.$router.push({name:value})
    },
    ...mapActions([
        'logoutAction'
    ]),
    logout: function(){
      if(confirm('确定退出登录吗？')){
        this.logoutAction(); // 触发action
        this.$router.push({name: 'home-page'});
      }else{
        return false;
      }
    }
  }
}
</script>

<template>
  <div class="hmtop">
    <!-- 顶部导航条 -->
    <div class="mr-container header">
      <ul class="message-l">
        <div class="topMessage">
          <div class="menu-hd">
            <a @click="show('login-home')" target="_top" class="h" style="color:red" v-show="!isLogin">亲，请登录</a>
            <span v-show="isLogin" style="color:green">{
   
   {user}},欢迎您<a @click="logout" style="color:red">退出登录</a></span>
          </div>
        </div>
      </ul>
      <ul class="message-r">
        <div class="topMessage home">
          <div class="menu-hd"><a href="javascript:void(0)" style="color:red">手机端</a></div>
        </div>
        <div class="topMessage home">
          <div class="menu-hd"><a @click="show('home')" target="_top" class="h" style="color:red">商城首页</a></div>
        </div>
        <div class="topMessage my-shangcheng">
          <div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="mr-icon-user mr-icon-fw"></i>个人中心</a></div>
        </div>
        <div class="topMessage mini-cart">
          <div class="menu-hd"><a id="mc-menu-hd" @click="show('shopcart')" target="_top">
            <i class="mr-icon-shopping-cart mr-icon-fw"></i>
            <span style="color:red">购物车</span>
            <strong id="J_MiniCartNum" class="h" v-if="isLogin">{
   
   {length}}</strong>
          </a>
          </div>
        </div>
        <div class="topMessage favorite">
          <div class="menu-hd"><a href="#" target="_top"><i class="mr-icon-heart mr-icon-fw"></i><span>收藏夹</span></a></div>
        </div>
      </ul>
    </div>

    <!-- 悬浮搜索框 -->
    <div class="nav white">
      <div class="logo">
        <a @click="show('home-page')"><img src="@/assets/images/logo.png"/></a>
      </div>
      <div class="logoBig">
        <li @click="show('home-page')"><img src="@/assets/images/logobig.png"/></li>
      </div>
      <div class="search-bar pr">
        <a href="#"></a>
        <form>
          <input id="searchInput" type="text" placeholder="搜索" autocomplete="off">
          <input id="ai-topsearch" class="submit mr-btn" value="搜索" index="1" type="submit">
        </form>
      </div>
    </div>
    <div class="clear"></div>
  </div>

</template>

<style scoped>

</style>

三、router/index.js

刚才我们提到，主界面包含路由的输出，而这个代码显示路由包含index的Home组件，以及login的Home组件。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/index/Home.vue'
import Login from '../views/login/Home.vue'

const routes = [
  {
    path: '/',
    name: 'home-page',
    component: Home
  },
  {
    path: '/login',
    name: 'login-home',
    component: Login

  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

四、index/Home.vue

该组件由两部分组成，Main.vue就是一张图片，Footer就是最下面的注脚部分内容。

<script>
  import Main from '@/views/index/Main'
  import Footer from '@/components/Footer'
  export default {
    name: 'home-page',
    components: {
      Main,
      Footer
    }
  }
</script>

<template>
  <div>
    <Main/>
    <Footer/>
  </div>
</template>

五、store/index.js，vuex的核心代码

登录或者退出两个行为，除了改变内存中vuex的状态信息，还需要更改session持久化中的变量信息。

import { createStore } from 'vuex'

export default createStore({
  state: {
    user: sessionStorage.getItem('user'),
    isLogin: sessionStorage.getItem('isLogin'),
  },
  getters: {
  },
  mutations: {
    login: function(state, user){
      state.user = user;
      state.isLogin = true;
      sessionStorage.setItem('user', user);
      sessionStorage.setItem('isLogin', true);
    },
    logout: function (state){
      state.user = null;
      state.isLogin = false;
      sessionStorage.removeItem('user');
      sessionStorage.removeItem('isLogin');
    }
  },
  actions: {
    loginAction: function(context, user){
      context.commit('login', user);
    },
    logoutAction: function (context){
      context.commit('logout');
    }
  },
  modules: {
  }
})