第三阶段 Vue day10

 导航守卫，路由守卫，路由跳转钩子函数

就是在路由跳转阶段自动执行的函数(index.js)

    1. beforeEach 全局前置

        `router.beforeEach((to,from,next)=>{})`

        - to -> 要去的路由

        - from -> 当前路由

        - next -> 控制函数

            - next() 正常跳转到 to

            - next(false) 不跳转

            - next(path | {name:xxx}) 指定跳转

    2. afterEach 全局后置

        `router.afterEach((to,from)=>{})`

    3. beforeEnter 路由独享守卫 -> 规则定义的时候

顶部进度条 nprogress

使用方式

    - 下载 npm install nprogress

    - 引入 import NProgress from 'nprogress'

    - 引入样式 import 'nprogress/nprogress.css'

 两个指令

        - NProgress.start()

        - NProgress.done()

路由组件内的守卫

- beforeRouteEnter

- beforeRouteUpdate

    - 用于详情页面复用的情况

- beforeRouterLeave

    - 用于一些填写资料等页面时，没有保存后退的时候给提示

tips

- router-link 默认渲染是a标签

    - tag属性,可以将a标签改成其他的标签

    - 4.x不适应

守卫执行顺序

- 没有复用

    0. beforeRouterLeave 组件内写入的离开

    1. beforeEach  路由前置

    2. beforeEnter  路由独享

    3. beforeRouteEnter 组件内写入的进入

    4. afterEach  路由后置

- 复用

    1. beforeEach  路由前置

    2. beforeRouteUpdate 组件内写入的更新

    3. afterEach  路由后置

性能优化 - 路由懒加载

- 折分

    - 将APP.js折分

     webpackChunkName:"aaa"

    - 可以对拆分出去的文件做一个命名，不然就默认 以 数字 名字

    - webpackChunkName 命名如果相同的话，会打包到一起 

    component: () =>

        import(/* webpackChunkName: "aaa" */ "@/views/FilmDetail.vue"),

 命名视图

    - 给坑(router-view) 取名字

    - 默认的坑位 -> default

    `<router-view name="default" />`

    ` <router-view name="top" />`   

```js

    components: {

        // key: value

        //    key 坑名

        //    value 对应的组件

        top: Home,

        bottom: {

          // template: `

          //   <div>

          //     <h1>1</h1>

          //     <p>p</p>

          //   </div>

          // `,

          render: (createElement) =>

            createElement("div", null, [

              createElement("h1", null, "1"),

              createElement("p", null, "p"),

            ]),

        },

        default: {

          render: (createElement) => createElement("div", null, "default组件"),

        },

      },

问题：

  1. template 选项的使用，会报错

  2. 当前项目，如何证实它就是用的 运行时版本呢

原因：

  1. 当前项目中使用的时 运行时版本，没有编译器功能。不会将 template 字符串编译。

  2. node_modules 中 vue 的 package.json 中定义的 module 字段的值

    - package.json 中 main 字段与 module 字段的区别

      - main:  给 commonjs 模块化系统使用的

      - module: 给 ES6 模块化系统使用的

- vue的两种版本

    1. 完整版

        - 包含有 运行时版本 + 编译器功能

    2. 运行时版

        - 不支持编译template选项

Vuex

> 一款vue官方团体提供的插件(Vue.use(xxx)),解决数据共享的问题

1. 使用 vuex 能做什么呢?

  能处理 vue 项目中 数据共享的 事情

2. 版本问题

  最新的版本是  vuex4.x

  3.xxx   vue 2.x

  4.xxx   vue 3.x

3. 官网的一个示例图

  一整个原生流程

  1. 组件派发(dispatch)动作(action).

  2. 动作(action)提交(commit)突变(mutation)

  3. 突变(mutation)修改(update)数据(state)

  4. 数据(state)引起组件的重新渲染(render)

  简短流程

  1. 组件直接提交突变

  2. 突变修改数据(state)

  3. 数据(state)引起组件的重新渲染(render)

4. 几个核心概念

  1. state        存放数据的位置

  2. mutations    存放突变的位置

  3. actions      存放动作的位置

  4. store        仓库. 上述三个东西,都在仓库中. 且 store 还有一些api供组件使用

      store.state       拿仓库的数据

      store.dispatch()  派发动作

      store.commit()    提交突变

      ....

5. Vuex 必须在项目中使用嘛?????

没必要

    你要用的时候,自然去用就好了.

vuex 的使用步骤

0. 安装

  1. 新项目  vue create xxx  时勾选上 vuex 即可.

  2. 老项目  vue add vuex 来安装. (不推荐) 需要保证代码是干净的.

  3. 老项目  npm install vuex@3  

1. 引入 vuex

import Vuex from 'vuex'

2. 注册这款插件

Vue.use(Vuex)

3. 实例化 Vuex 的仓库的实例对象

const store = new Vuex.Store({

  // 仓库的相关配置

  state: {},

  mutations: {},

  actions: {},

  getters: {},

  moudles: {},

})

4. 将 store 与 vue 实例关联起来

new Vue({

  store: store

})

仓库的数据有了,如何拿到页面(组件)中使用呢?

使用了vuex之后,并且相关的配置都ok之后,所有组件都能有一个 $store 对象,这个对象就是仓库的实例对象.

也就是 你  new Vuex.Store() 得到的那个东西

1. 直接使用 $store.state.xxx 去使用  (不推荐)

2. 使用 计算属性 去拿仓库的数据  (推荐)

3. 使用 vuex 中的 mapState 辅助函数 (推荐)

...

```js

computed: {

    ...mapState(["a", "b"]),

    selfMsg() {

      return "123";

    },

  },

```

为什么组件中使用时,推荐使用计算属性而不要直接$store.state.xxx的方式

1. 用计算属性时,可以修改名字

2. 利用计算属性不能修改的特点, 避免直接通过 $store.state.xxx 的方式去修改它.

组件使用 state 的数据

1. 模板中直接 $store.state.xxx    ×

2. 计算属性                      √

3. 计算属性结合 mapState 辅助函数  √√

mapState 的几种写法

```js

1. 数组形式：mapState(['a', 'b'])

2. 对象形式：mapState({

  // key: value

  //    key     自定定义的计算属性的名字

  //    value

              // 1. 字符串           'a'

              // 2. 箭头函数与普通函数  

              //     1. return 数据

              //     2. 会接收到一个 state 参数。这个参数就是仓库中的 state

              //     3. 普通函数中可以使用到this(当前组件的实例对象)

})

```

 修改仓库中的数据

1. 在配置项 定义 mutations  --> 函数名

2. 提交突变 `this.$store.commit("自定义事件函数名"，值)`