Vue的学习补充

1.Vue路由-404

作用：当路径找不到匹配时，给个提示页面

位置：配在路由最后

语法：path:'*'（任意路径）-前面不匹配就命中最后这个

 2.Vue路由-模式设置

• hash路由（默认）  例如：http://localhost:8080/#/home
• history路由（常用） http://localhost:8080/home（以后上线需要服务器端支持）

3.编程式跳转

查询参数传参

方式一：适合单一传参

 

方式二：适合传多个值

动态路由传参

4.基于vueCli自定义创建项目架子

5.ESlint代码规范

代码规范：一套写代码的约定规则。

JavaScript Style规范说明 https://standardjs.com/rules-zhcn.html

6.Vuex

1.是什么：

Vuex是一个vue的状态管理工具，状态就是数据

大白话：vuex是一个插件，可以帮我们管理vue通用的数据（多组件共享的数据）

2.场景：

①某个状态在很多个组件来使用（个人信息）

②多个组件共同维护一份数据（购物车）

3.优势

①共同维护一份数据，数据集中化管理

②响应式变化

③操作简洁（vuex提供了一些辅助函数）

步骤：

目标：安装vuex插件，初始化一个空仓库

1. 安装 Vuex 库

可以使用 npm 或者 yarn 等包管理器来安装 Vuex 库。

npm install vuex

2.创建 store

在 Vue 3 中，需要先创建一个 store 对象，然后再将其传递给 Vue 的 createApp() 函数来创建 Vue 应用程序。

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

export default store

1. 3.将 store 对象注入到 Vue 应用程序

可以使用 app.use() 方法将 store 对象注入到 Vue 应用程序中。

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

4.在组件中使用 store

核心概念-state

使用数据：

①通过store直接访问

（1）this.$store.state.count

（2）import 导入 store

在main.js文件中可以先导入store，后使用this.$store.count

辅助函数-mapState

在组件中，可以使用 computed 属性来获取 store 中的状态，使用 methods 属性来调用 store 中的 mutations 和 actions。

mapState(['count'])得到的是一个对象，可以使用展开运算符将展开的对象放到computed中

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync'])
  }
}
</script>

核心概念-mutations

目标：明确vuex同样遵循单向数据流，组件中不能直接修改仓库的数据。

错误代码：this.$store.state.count

目标：掌握mutations的操作流程，来修改state数据。（state数据的修改只能通过mutations）

1.定义mutations对象，对象中存放修改state的方法。

 2.组件中调用mutations

传参

提交mutation是可以传递参数的` this.$store.commit("xxx",参数）`

 如果想要传递多个参数的时候，可以用对象传递

注意点：mutation参数有且只能有一个，如果需要多个参数，包装成一个对象。

store和使用者的双向绑定：

 辅助函数：mapMutations

目标：掌握辅助函数maoMutations，映射方法

mapMutations和mapState很像，它是把位于mutations中的方法提取了出来，映射到组件methods中

 核心概念-actions

目标：明确actions的基本语法，处理异步操作

需求：一秒钟之后，修改state的count成666

说明:mutations必须是同步的（便于监测数据变化，记录调试）

 action中并不是直接修改store中的值，而是通过commit提交mutation中的方法来修改值

辅助函数-mapActions

目标：掌握辅助函数mapActions，映射方法。

mapActions是把位于actions中的方法提取出来，映射到组件methods中

核心概念-getters

目标：掌握核心概念getters的基本语法（类似于计算属性）

说明：除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

 2.访问getters

①通过store访问getters

{{$store.getters.filterList}}

②通过辅助函数mapGetters映射

computed:{
...mapGetters(['filterList'])
},

{{filterList}}

辅助函数-mapGetters

 核心概念-模块module（进阶语法）

目标：掌握核心概念module模块的创建

由于vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就是可能变得相当臃肿。（当项目变得越来越大的时候，Vuex会变得越来越难以维护）。

 

 访问模块中state

目标：掌握模块中state的访问语法

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的state中，属性名就是模块名。

使用模块中的数据：

①直接通过模块名访问$route.store.模块名.xxx

②通过mapState映射

默认根级别的映射  mapState(['xxx'])

子模块的映射 mapState('模块名',['xxx'])-需要开启命名空间

 访问模块getters

目标：掌握模块中getters的访问语法

使用模块中getters中的数据：

①直接通过模块名访问$store.getters["模块名/xxx"]

②通过mapGetters映射

默认根级别的映射mapGetters(['xxx'])

子模块的映射mapGetters（'模块名',['xxx']）-需要开启命名空间

const getters = {
    //分模块后，state指代子模块的state
    UpperCaseName(state) {
        return state.userInfo.name.toUpperCase()
    }
}

 访问mutation的调用语法

注意：默认模块中的mutation和actions会被挂载到全局，需要开启命名空间，才会挂载到子模块

调用子模块中mutation：

①直接通过store调用$store.commit('模块名/xxx',额外参数)

②通过mapMutations映射

默认根级别的映射mapMutations(['xxx'])

子模块的映射mapMutations（'模块名',['xxx']）-需要开启命名空间

 访问action

 

Vue3的优势

 

 1.代码量变少了

2.分散式维护转为集中式维护，更容易封装复用。

create-vue搭建Vue3项目

1.前提环境条件

已安装16.0或更高版本的Node.js

node -v

2.创建一个Vue应用

npm init vue@latest

这一指令将会安装并执行create-vue

项目文件简介：

 

组件导入，无需注册。 

Vue3语法：

组件导入，无需注册。 

new Vue()创建一个应用实例=>createApp()

createRouter()、createStore()

将创建实例进行封装，保证每个实例的独立封闭性。

组合式API-setup

1. setup比beforeCreate生命周期函数还要早。

2.setup函数中获取不到this(this是undefined)，vue3中基本上不会用到this

如果想要使用setup中的数据，必须return 

问题：每次都要return好麻烦，有什么解决方法吗？

只需要在script中加上setup