【Vue】Vue开源样式库 Vuex的使用 vuex的执行流程 Vue-router的使用 路由跳转 路由守卫

目录

• 昨日回顾
  • 纯净的Vue项目
• 今日内容
  • 0 开源样式库
  • 1 Vuex 的使用
    • 1.1 vuex的执行流程图
  • Vuex的使用
  • 购物车案例
  • 2 Vue-router的使用
    • 2.1 基本使用
    • 2.2 路由的跳转
      • 传入字符串进行跳转
      • 传入对象进行跳转
    • 2.3 路由跳转携带参数
    • 2.4 路由嵌套
    • 2.5 路由守卫
• 练习
  • uni-app

昨日回顾

# 1 vue项目目录----》vue项目编译---》html，css，js
	-public：index.html     单页面应用
    -src：以后写代码，都在这里面写    @
    	-assets
        -component
        -router
        -store ：vuex 状态管理器
        -views ：页面组件
        -App.vue  根组件
        -main.js
    -vue.config.js  vue的配置
    -package.json  项目依赖

    # node_models 删掉---》npm install
    # yarn

# 2 vue项目开发流程
	-新建xx.vue,里面有三部分
    -templage：html内容，div--->html
    -script:js
    import xx from 'xx'
     exoprt default {
         data(){
             return{
                 name:'lqz'
             }
         },
     }
     -style scoped
# 3 导入导出语法
	-模块化开发
    -匿名导出的导入  import xx from '位置'
    -命名导出的导入  import {a,yy} from '位置'
    -匿名导出       export default {}
    -命名导出       export const a={}
# 4 项目中使用axios，打通前后端
	-npm install axios
    -import axios from 'axios'
    -axios.get('地址').then(res=>{})
    -axios.post(地址,{}).then(res=>{})
# 5 mixin :混入，抽取公用代码
	-全局使用：main.js vue.mixin(对象)
    -局部使用：组件 mixins:[,]
# 6 插件：对象内部有个install函数
	export default {
        install(){
            # 1 放到vue实例中一些变量，以后在任意组件this.$xx
            # 2 Vue.mixin()
            # 3 自定义的全局组件
            # 4 自定义指令  v-xx
        }
    }

    main.js   Vue.use(插件)

 # 7 localStorage，sessionStroage，cookie

 # 8 elemetui
    	-iview
        -vant
      	-使用
        	-下载
            -main.js 注册

纯净的Vue项目

# 安装依赖
	cnpm install
# 做成纯净的vue项目
	-第一步：在router 的index.js 中删除about的路由
    -第二步：删除所有小组件和about页面组件
    -第三步：App.vue 只留
    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>

这两个地址有什么区别：

本机地址和网络地址。

今日内容

0 开源样式库

京东移动端开源样式库：

字节跳动PC端开源样式库：

1 Vuex 的使用

# Vuex是vue的插件，增强了vue的功能。
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

# Vuex的使用流程
	-state：存数据的地址
    -actions：服务员，中转站
    -mutations：厨师，真正改state数据的地方

# Vuex使用步骤：
    	1 在state中定义变量
        2 在组件中通过this.$store.dispatch('actions中定义的函数')，触发actions中得函数执行
        3 在actions中得函数中，调用 context.commit('mutations中定义的函数')
        4 在mutations中定义的函数实现真正的修改state中得数据
        5 页面中只要使用$store.state.变量，变量变化，页面就变化  实现了组件间通信
		6 注意：
        	-在组件中可以直接调用commit触发【mutations中定义的函数】
            -在组件中可以直接修改state中定义变量

# Vuex使用示例：
1 安装，新建store/index.js

2 在index.js 中写
        export default new Vuex.Store({
            state: {
                # 放数据
            },

            mutations: {
                # 放方法，正常是让actions中来调用
                # 组件也可以直接调用

            },
            actions: {
                # 放方法，正常组件调用
            }
        })

3 在组件中
    	-显示state的变量
        html中：
          {{$store.state.变量名}}
        js中：
        	this.$store.state.变量面
        改state中的值

    -推荐按正常步骤：
        1. this.$store.dispatch('actions中的方法',参数)
        2.actions中的方法调用context.commit('mutations',参数)
        3.在mutations中直接修改state的值

    -也可以跨过任何一步，直接使用commit或者直接修改state:
        this.$store.commit()
        this.$store.state.变量名			

以一个购物车功能举例:

点击按钮，会导致购物车上显示的数字发送变化。

集中式管理：

1.1 vuex的执行流程图

从左边的Vue Components（Vue组件）开始看。

Backend API：后端接口

Devtools：在浏览器可以装一个Vue调试插件。可以看到Vue组件。

VueX有三个状态Actions，Mutations，State。

在组件的数据通过调用dispatch放入Vuex状态管理器，进入actions状态，在actions状态调用commit，进入Mutations状态，在Mutations调用Mutate实现真正的修改数据。

比如组件向修改一个变量的数据，需要先通过actions的逻辑判断，判断当前组件是否允许修改数据。actions可以向后端发请求，判断当前用户是否有权限。

在一些情况下，Vue组件可以跨过Actions状态，直接通过Mutations修改数据。

Vuex的使用

由于我们创建项目的时候自动安装了Vuex，所以会有一个store文件，在此文件夹下有index.js，查看其代码：

在main.js注册：

补充，在main.js这个Vue对象里传入store:'lqz'属性

在根组件打印this:

查看浏览器：

总结：也就是说在main.js里的这个Vue对象里添加的属性，以后再任意组件中都可以通过$属性名的方式获取。

所以Vuex就是将自己的对象放入了$store供所有组件使用（this.$store）：

而这个对象，就是从store/index.js导出的那个对象：

对象的state属性：

数据查找属性：

对象自己 ---> prototype原型 ---> 原型的原型 ---> object

如何在页面上使用，存放在Vuex的数据？

如果直接赋值给变量，会导致数据不联动：

应该直接通过插值语法使用数据：（在插值语法中不需要写this）

这样可以保证页面的数据和Vuex对象里的数据是绑定关系。一起联动。

补充：

组件data里的变量，会做一次提升。本来这些数据应该放在_data内`：

会将这些变量从data内提升到最上层，所以通过插值语法可以直接使用，无需this.name。

修改Vuex中的数据：

写事件函数：

但是不建议这样做，这相当于直接操作state状态的数据：

需要先经过actions、Mutations

按照正常套路，先触发actions的执行：

在actions定义函数：

查看context、value：

可以重复调用dispatch：

在actions触发commit的执行：

在mutations添加函数：

在mutation里这个add函数，真正的实现修改state中的数据。

购物车案例

多个商品组件添加购物车，购物车商品数量增加。这个购物车商品的数量就存在state里。

定义购物车组件：

商品页面：

显示购物车组件：

查看前端：

按钮的事件函数：

在store/index.js写actions函数:

触发commit:

修改数据：

可以在actions中发送ajax。

如果不发送ajax和后端交互，直接在组件内修改数据即可：

2 Vue-router的使用

# Vue-router是什么？
是官方提供的用来实现SPA的vue插件。
有了它以后，我们可以写很多页面组件，通过地址栏不同的路径显示不同的页面组件
官网地址 ---> https://router.vuejs.org/zh/index.html

# Vue-router基本功能：
    -路由控制
    -<router-link>   跳转用
    -<router-view/>  替换页面组件用

2.1 基本使用

#1 基本使用
	-1 创建vue项目时加入了，直接用即可
    	如果之前没装：
		1.1 先下载router
         1.2 在项目中创建router包，写个index.js
    	const routes = [配置路由1,配置路由2]
         1.3 在main.js中导入router
    	import router from './router'
        new Vue({
            ...
              router,
            ...
            }).$mount('#app')

    -2 配置路由的跳转(跳转页面组件)，只需要在routes数组中写对象即可
    	const routes = [
            {
                path: '/',
                name: 'index',
                component: Index
            },
            {
                path: '/home',
                name: 'home',
                component: Home
            }
        ]
    -3 一定要写个视图组件 Home
    -4 在App.vue中加入
      	<router-view>

        </router-view>
    -5 在浏览器访问const routes中配置的路径，就能看到对应的页面组件了

2.2 路由的跳转

# 实现点击按钮跳转
# 使用步骤：
	- 在html中使用
        <router-link to="/home">
          <button>点我跳转到home页面</button>
        </router-link>
    -在js中使用
    	this.$router.push('goods')

传入字符串进行跳转

在index页面点击按钮跳转到login页面：

1.通过js代码可以实现跳转：

更多api：

2.通过标签的形式实现跳转

用rounter-link将按钮包一下（也可以实现点击任意标签跳转）。

传入对象进行跳转

# 两种跳转方式，使用对象方式
	-this.$router.push({
        name: 'login',
        // query: {
        //   name: 'lqz',
        //   age: 19
        // },
        params: {
          id: 88
        }
      }) # 这里可以写个对象

    -标签形式跳转，传对象形式
    <router-link :to="{name: 'login', query: {name: 'lqz'}, params: {id: 999}}">
      <button>点我跳转到home页面</button>
    </router-link>

通过js代码 - 对象方式进行跳转：

这里的name对应着路由的别名。

查看控制台：

通过rounter对象可以获取数据。

通过标签 - 对象方式进行跳转

2.3 路由跳转携带参数

# 两种情况
	-1 /course/?pk=1   带在路径中使用 ? 携带
    -2 /course/1/      路径中分割的

# 情况1：请求地址中
	-<router-link to="/login/?name=lqz&age=19">去登录</router-link>
    -组件中接受：this.$route.query.取

    更多示例：
    /course/?pk=1
    this.$route.query.pk

# 情况2：地址中
	<router-link to="/login/lyf">去登录</router-link>
    -组件中接受：this.$route.params.取

    更多示例：
    - 需要修改router/index.js文件。添加一个新路径path
             {
                path: '/login/:id',
                name: 'login',
                component: Login
            },
        -this.$route.params.id

区分this.$route\ this.$router:

#4 区分this.$route  this.$router
    -this.$router #   new VueRouter对象，是路由插件的实例，可以实现路由的跳转
    -this.$route  #   是当前路由对象，内部有传入的参数

route是当前的路径对象。router是router插件的对象。

情况一.带在路径参数中：

在login页面通过路由对象获取参数：

情况二.参数携带在路由中

传参数：

添加路由：

这是一个新的路由，和/login/没关系，定义一个变量名id接受参数。

之后我们会使用id这个变量名获取参数。

获取参数：

这个参数是从路由中切分出来的。

2.4 路由嵌套

# 使用步骤：
	1 router/index.js 相应的路由中
        {
            path: '/goods',
            name: 'goods',
            component: Goods,
            children: [
                {
                    path: 'list',
                    component: GoodList
                },
                {
                    path: 'detail',
                    component: GoodDetail
                }
            ]

        },
     2 必须要在Goods组件中，写<router-view></router-view>
     3 使用router-link标签跳转
     4 只会变更Goods下router-view包裹的位置

2.5 路由守卫

# 路由守卫的作用
对路由进行权限控制

# 路由守卫分类
全局守卫
        -前置路由守卫：在进路由前，执行代码
        -后置路由守卫：路由跳转走，执行代码

我们使用：
全局前置路由守卫 ---> 任意路由跳转都会触发它的执行

# 前置路由守卫
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)

    if (to.name == 'shoppingcart') {
        let name = localStorage.getItem('name')
        if (name) {
            next()
        } else {
            alert('不好意思没有权限')
        }
    } else {
        next()
    }

})
# 后置路由守卫
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.name
})

# 使用路由守卫：

 如何用：router/index.js 加入
    // 全局前置路由守卫--->任意路由跳转都会触发它的执行
router.beforeEach((to, from, next) => {
    // to 是去哪，哪个路由对象
    // from 是来自哪，是哪个路由对象  比如从  /--->/login
    // next 是函数，如果加括号执行，就会真正的过去
    console.log('前置路由守卫', to, from, next)
    // next() // 真正跳转到 要去的路径

    if (to.name == 'login') {
        console.log('走了')
        next()
    } else {
        var res = localStorage.getItem('userinfo')
        if (res) {
            next()
        } else {
            alert('您没有登录')
            // 跳转到login--->没有解决---》你们搜一下如何解决
            // console.log(this)
            // router.push('/login')
        }
    }
})

跳转进路由，如果你不符合条件，就不让你跳转。进路由之前进行判断，符合条件才能进入。

写路由跳转逻辑：

这样会导致用户没有登录，所有页面都访问不了。

修改代码：

练习

1 自定义混入测试 ok
2 自定义插件，把axios放入到vue的原型中 ok
3 研究elementui，写个页面 ok
4 整理vuex的使用 ok
5 整理vueRouter的使用 ok
6 整理localStorage的使用 ok
----------------------
7 uni-app----》写个安卓app，有个按钮，点击随机切换图片

uni-app

# 1. 下载软件
# 2. 新建项目
# 3. index.vue是首页

添加事件：

使用远程打包。

template里面必须有个View标签，在View标签里面写代码。