前台商城网站项目心得

1：token: 标志用户登录状态 ， 存储用 vuex+cookie 实现, 即 vuex 里面设置变量 userToekn, 防止页面刷新 vuex中的变量恢复初始值。保存用户个人信息 ，用vuex 中变量userInfo (vuex+ localstorage), 原理跟token一致。

2:element ui 框架使用注意事项:

2.1：dropDown 下拉菜单：  点击el-dropdown-item 隐藏el-dropdown-menu （ui框架自带的功能），必须把点击事件写在 el-dropdown-item 上 ，应用场景： 

 

 产品需求： 鼠标放上去， 个人中心下拉框展示出来， 点击 “退出登录” 执行 loginOut（） 方法， 并且下拉框关闭， 代码如下： 

<el-dropdown>

          <div class="drop-top">

            <img v-show="img01" src="~img/index/pSetting/person01.png" alt="" />

            <img

              v-show="!img01"

              src="~img/index/pSetting/person02.png"

              alt=""

            />

          </div>

          <el-dropdown-menu slot="dropdown" class="drop-down-con">

             <el-dropdown-item class="flex" @click.native="loginOut">

              <p class="pointer out">退出登录</p>

            </el-dropdown-item>

          </el-dropdown-menu>

</el-dropdown>

js：

methods: {

　　// 退出登录

    loginOut() {

      this.LOGIN_OUT();

　}

}