复习

包/模块module: export / import
单文件组件： .vue 一个组件封装成一个vue文件；

语法高亮；
模块的导入导出；
组件作用域的css

vue-router：

基本结构
- 页面： router-link / router-view
- 定义组件
- 路由表 routes
  - path 路径
  - name 名字
  - component 组件
  - children 嵌套路由
- 路由对象，设置路由表，放入到vue实例中
动态路由
嵌套路由
编程式导航 push
路由守卫
- 全局路由前置守卫 beforeEach(to,from ,next) 解析守卫后置钩子

脚手架项目

创建：vue create 项目名 / vue ui
结构：
- package.json
- main.js 入口，全局配置，引入库
- App.vue 页面骨架，容器
- /router 路由配置
- /views 视图、页面
- /components 组件
- /assets 资产
怎么添加页面

安装依赖 npm install element-ui -S

Vuex

问题：前端需要存储类似是否登录这样的数据，用于判断页面能否显示？

两种方式：

简单处理方式（丐版），在浏览器中存储数据： localStorage / sessionStorage (html5)

为何不用Cookie？
页面切换时，可能不发请求；数据量比较大
localStorage和sessionStorage的API是一致的，如下：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

localStorage和sessionStorage的区别在于作用域范围，localStroge针对一个网站，持久存储；sessionStorage只对一个标签，关闭则消失；一般使用localStorage;

拦截登录实例

路由守卫，拦截所有请求，基于router实现守卫，代码写在/router/index.js ```javascript import {Message} from ‘element-ui’

…

router.beforeEach((to,from,next)=>{ let isLogined = localStorage.getItem(“isLogined”); console.log(“是否登录”+isLogined);

if(to.path==’/login’){ console.log(“登陆请求，放行”); next(); return; } if(isLogined){ console.log(“已登录，放行”); next(); return; }

Message({ type:”error”, message:”请您先登录” }); //this.$router 是在vue实例中使用 //跳转 router.push(“/login”);

});


2. 登录完成后，存入登录标记
```vue
<template>
    <el-form
    :model="ruleForm"
    status-icon
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    >
    <el-form-item label="用户名" prop="pass">
        <el-input
        type="text"
        v-model="ruleForm.username"
        autocomplete="off"
        ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="checkPass">
        <el-input
        type="password"
        v-model="ruleForm.password"
        autocomplete="off"
        ></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
    </el-form>
</template>
<script>
export default {
    name: "Login",
    data() {
        return {
            ruleForm: {
            username: "",
            password: "",
            }
        };
    },
    methods: {
        submitForm() {
            alert("登录成功");
            localStorage.setItem("isLogined","true");
        }
    },
};
</script>

可以通过开发者控制台查看localStorage所存的数据

Vuex

https://vuex.vuejs.org/zh/
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

处理中大型的vue应用程序的数据状态管理

state，数据存储，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，用来修改state的一些操作，响应在 view 上的用户输入导致的状态变化。

如果state里有一个属性叫余额，那么actions就可能存在充值或者提现这样方法

以下是一个表示“单向数据流”理念的简单示意：
2021年6月28日 vue6 - 图4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{count}}</div>
        <div>
            <button @click='add'>+</button>
            <button @click='minus'>-</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
    <script>
        // public class A{
        //     private int count=0;
        //     public void incr(){
        //         count++;
        //     }
        //     public void decr(){
        //         count--;
        //     }
        // }
        //创建了一个Vuex的store对象
        const store = new Vuex.Store({
            state:{//数据
                count:0
            },
            mutations:{//action，对数据的操作
                incr(state){//参数为state对象
                    state.count++;
                },
                decr(state){
                    state.count--;
                }
            }
        });
        let app = new Vue({
            el:"#app",
            data:{
                // count:0
            },
            computed:{//通过计算属性将store内部的值放进到vue实例中
                count(){
                    return store.state.count;
                }
            },
            methods:{
                add(){
                    //触发store的相应的mutation更改器
                    store.commit('incr');
                },
                minus(){
                    store.commit('decr');
                }
            }
        })
    </script>
</body>
</html>