# getters

## 说明

类似于vue中的计算属性，用于处理数据
getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算



## 语法
```
      getters:{
        money(state){
          return some code
        }
      },
```

参数
state：vuex中整个state

Eg

![getters](https://cos.dwxzbz.com/vue2/vuex/20220831105723.jpeg)

## 取值
```
    this.$store.getters.name
```

Eg

![getters-acquire\_result](https://cos.dwxzbz.com/vue2/vuex/20220831105745.jpeg)

## getters传参

正常情况下,getters无法传参，但是若使其执行结果为函数便可以传参

Eg

![getters传参](https://cos.dwxzbz.com/vue2/vuex/20220831105812.jpeg)

ES6简写为

![getters传参ES6简写](https://cos.dwxzbz.com/vue2/vuex/20220831105833.jpeg)

VuexV3-Getters

# state  
## 说明
称为单一状态树，即一个对象就包含了全部应用层级状态，作为一个"唯一数据源"存在   



简单理解为此处存放了所有页面中用于共享的数据
![state](https://cos.dwxzbz.com/vue2/vuex/20220831105547.jpeg)

## 存放数据  
state值为对象    
```
  state: {
      name:value
  },
```

## 取、使用数据  
state中的数据都需放在计算属性中再使用，只有如此才是响应式的，否则直接使用不是响应式的   
```
...
computed: {
    msg(){
        return this.$store.state.name
    }
}
```

Eg    
![state-acquire_state](https://cos.dwxzbz.com/vue2/vuex/20220831105614.jpeg)

VuexV3-State

## vuex

### vuex概念

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

简单理解为： 专门用于复杂组件间数据传递、管理



### 特点

*   响应式，即组件更改数据后，其它组件使用此数据会自动更新
*   变化有迹可循

## 安装vuex

### 命令

    npm install vuex

### 安装成功

则package.js中会显示对应版本
![install-result](https://cos.dwxzbz.com/vue2/vuex/20220831104917.jpeg)

## 存放位置

src下创建sotre文件，store中建立index.js文件

## store

### 说明

每一个 Vuex 应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着应用中大部分的状态 (state)

### Vuex和单纯的全局对象的不同点

*   Vuex的状态存储是响应式的，当组件更改store中的状态后，则相应组件也会发生改变
*   无法直接改变 store 中的状态。改变store 中的状态的唯一途径就是显式地提交 (commit) mutation，从而方便追踪每一个状态的变化

## store/index.js基础文件解析

### 默认配置

使用脚手架创建项目时自动会有以下配置\
![store\_index](https://cos.dwxzbz.com/vue2/vuex/20220831105006.jpeg)

#### 导入模块

    import Vue from 'vue'
    import Vuex from 'vuex'

#### 注册模块

外部安装的组件(为vue定制、配套的)都需要Vue.use()注册

    Vue.use(Vuex)

同时在main.js中引入，根实例中注册\
![register\_in\_main-js](https://cos.dwxzbz.com/vue2/vuex/20220831105041.jpeg)

#### 配置与导出

写法一

```
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

```

写法二

```

var store = new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

export default store
```

VuexV3-安装与文件目录结构

# 说明  
导航守卫主要用来通过跳转或取消的方式守卫导航, 常用于如登录判断权限验证中是否跳转还是取消

# 分类  
- 全局前置守卫  
- 全局解析守卫  
- 全局后置钩子  
- 路由独享的守卫  
- 组件内的守卫 



# 全局前置守卫`beforeEach`

## 说明

和`vue-routerv3`的没有区别，同样是**每次导航时触发**


## 语法  
```
router.beforeEach((to,from,next)=>{
  //some code
  next()
})
```

### 参数说明  
`to`：即将要进入的目标 路由对象  
`from`：当前导航要离开的路由  
`next`: 创建全局守卫后一定要调用该方法来 resolve这个钩子。执行效果依赖next方法的调用参数   
  - `next`()：直接放行，进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)  
  - `next(false)`：中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么URL地址会重置到from路由对应的地址  
  - `next("/")`或`next({path:"url"})`： 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航  

### EG

```ts
// 全局前置守卫
router.beforeEach((to, from, next) => {
	console.log('全局前置守卫', to, from);
	next();
});
```

# 全局解析守卫`beforeResolve`

## 说明  

和`router.beforeEach`类似，区别是**在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用**

## EG

```ts
// 全局解析守卫
router.beforeResolve((to, from, next) => {
	console.log('全局解析守卫', to, from);
	next();
});
```

# 全局后置钩子

## 说明

同样具有`to、from`，但是不会接受next参数, 常用于分析、更改页面标题、声明页面等辅助功能

## 语法  
```ts
router.afterEach((to, from) => {
  // ...
})
```


# 路由独享守卫

## 说明

`beforeEnter`守卫只会在进入路由时触发，当路由的`parmas、query、hash`发生变化时并不会重复触发

```
/login/xm/23/%7B"computer":"true","want":["a","b"]%7D  --> /login/xm/24/%7B"computer":"true","want":["a","b"]%7D

// 动态路由变化时并不会再次触发`beforeEnter`函数
```
## EG
```ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				alias: '/logins/:name/:age/:hobby',
				component: () => import('@views/Login/LoginView.vue'),
				beforeEnter: (to, from, next) => {
					// ...
					console.log('路由独享守卫beforeEnter触发');
					next();
				},
			},
			{
				path: '/register',
				name: 'registers',
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
	console.log('全局前置守卫', to, from);
	next();
});

// 全局解析守卫
router.beforeResolve((to, from, next) => {
	console.log('全局解析守卫', to, from);
	next();
});
export default router;

```


# 组件内的守卫

## `vue-routerv3`中

- `beforeRouteEnter`
- `beforeRouteUpdate`
- `beforeRouteLeave`

## `vue-routerv4`中

### 说明

对于组合式API,  `beforeRouteUpdate`和`beforeRouteLeave`发生了改变

- onBeforeRouteLeave：在导航离开渲染该组件的对应路由时调用
- onBeforeRouteUpdate：在当前路由改变，但是该组件被复用时调用，`EG：动态路由`

### EG

```vue
<template>
	<div>登录界面</div>
</template>

<script setup lang="ts">
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';

const route = useRoute();

// const propsmy = defineProps<{ name: string; age: string; hobby: string }>();
console.log('params登录', route, route.params);
// console.log('propsmy登录', propsmy);

onBeforeRouteLeave((to, from) => {
	console.log('组件内守卫onBeforeRouteLeave', to, from);
});

onBeforeRouteUpdate((to, from) => {
	console.log('组件内守卫onBeforeRouteUpdate', to, from);
});
</script>

<style></style>
```

VueRouter-导航守卫

# 安装

```
pnpm add vue-router@4
```




# 创建路由

创建路由文件

```
├── src  
| ├── App.vue  
| ├── router  
| | └── index.ts  
...
```

## 在`VueRouter@4`版本中

创建路由通过`createRouter`创建，而`vue-router3`中使用的是`new Router`;

- `src/router/index.ts`

```ts
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: '/',
			name: 'home',
			component: () => import('@views/IndexView.vue'),
		},
	],
});

export default router;
```

- `src/main.ts`

```ts
import { createApp } from 'vue';
import './style.css';
import router from './router/index.ts';

import App from './App.vue';

createApp(App).use(router).mount('#app');

```


# 路由模式

## `VueRouter4`中

同样是具有`hash`模式和`history`模式, 不同在于指定路由模式时的不同

- `hash`模式： `createWebHashHistory`创建
- `history`模式: `createWebHistory`创建

```ts
import { createRouter, createWebHistory } from 'vue-router';
// import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: '/',
			name: 'home',
			component: () => import('@views/IndexView.vue'),
		},
	],
});

export default router;
```

## `VueRouter3`中

`mode`直接传入`history`或者`hash`即可

```ts
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
	  mode: 'history',
	  routes: [
	    {
	      path: '/',
	      name: '登录',
	      component: () => import('@/views/Login.vue')
	    },
	    ...
	  ]
 })
```


# 访问根路由实例和当前路由实例

## `VueRouter4`中搭配组合式API使用

根路由实例： 通过`useRouter`获取

当前路由实例: 通过`useRoute`获取

## `VueRouter3`中

根路由实例： 通过`this.$router`获取

当前路由实例: 通过`this.$route`获取


# RouterLink与RouterView

## RouterLink

### 说明

会被渲染为带有`href`属性的`a`标签

### 语法

```vue
<router-link to="/about"></router-link>
```

### 使用EG

```vue
<RouterLink to="/register">跳转注册页面</RouterLink>
```


## RouterView

### 说明

路由视图，用于显示与`url`对应的组件

### 分类

- 普通路由视图
- 命名路由视图

### EG-普通路由视图

#### 普通路由视图EG

```vue
<template>
	<div>
		<el-button type="primary" plain @click="changeTest(1)">登录</el-button>
		<el-button type="primary" plain @click="changeTest(2)">注册</el-button>
		<RouterLink to="/register">跳转注册页面</RouterLink>
	</div>
	<RouterView></RouterView>
</template>
...
```

#### 对应的路由

```ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name',
				name: 'login',
				props: true,
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'register',
				props: { name: String },
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;
```

### EG-命名路由视图

命名路由视图EG

```vue
<template>
	<RouterView name="login"></RouterView>
	<RouterView name="register"></RouterView>
</template>
...
```

#### 对应的路由

```ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		components: {
			login: () => import('@views/Login/LoginView.vue'),
			register: () => import('@views/Register/RegisterView.vue'),
		},
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;
```


# 动态路由

## 说明

和`vue-router_v3`没区别，都是`path: '/login/:name/:age/:hobby'`的形式

### 注意点

动态路由映射`params`: 

- **路由中要开启`props: true`选项**
- 路由对应的组件使用`defineProps`规定接受的`props`, 或者直接通过`useRoute`获取当前路由然后使用`.params`获取到传递的参数

`touter.ts`路由中的动态路由规定`props:true`将动态路由映射到子组件内的`props`上

```ts
{
	path: '/',
	name: 'home',
	component: () => import('@views/IndexView.vue'),
	children: [
		{
			path: '/login/:name/:age/:hobby',
			name: 'login',
			props: true,
			component: () => import('@views/Login/LoginView.vue'),
		},
		{
			path: '/register',
			name: 'register',
			props: { name: String },
			component: () => import('@views/Register/RegisterView.vue'),
		},
	],
},
```

路由对应的组件: 需要通过`defineProps`规定接受的`props`参数

```vue
<template>
	<div>登录界面</div>
</template>

<script setup lang="ts">
const route = useRoute();

// 在动态路由规定`props:true`后可以通过`defineProps`获取params
const propsmy = defineProps<{ name: string; age: string; hobby: string }>();

console.log('propsmy登录', propsmy);

// 不使用defineProps在动态路由规定`props:true`后可以直接通过`route.params`获取
console.log('params登录', route, route.params);
</script>

<style></style>

```

- 在对应的动态路由中未规定`props:true`
![NoUsePropsItemInRouterFile](https://cos.dwxzbz.com/vue3/VueRouterV4/params-routerNousePropsItem.jpg)

- 规定`props:true`后
![UsePropsItemInRouterFile](https://cos.dwxzbz.com/vue3/VueRouterV4/params-routerUsePropsItem.jpg)

- 动态路由对应的组件内不使用`defineProps`, 直接使用`route.params`获取

![NoUseDefineProps](https://cos.dwxzbz.com/vue3/VueRouterV4/params-ComNoUseDefinProps.jpg)

## EG

```ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'register',
				props: { name: String },
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;

```


# 路由跳转与传参

## `name`跳转与`params`传参

### 说明

通过`useRouter`获取根路由实例，然后调用`.push`方法跳转

- `.push`跳转: 会在`history`中添加一条记录，浏览器的返回会回到上一个记录
- `.replace`跳转： 不会在`history`中添加记录，浏览器的返回会回到上上条记录

### 注意点

- 使用`params`传参时只能搭配`name`使用

- `params`的值必须为一个对象，对象的属性名必须为字符串，对象的属性值必须为`string | number | null | undefined`或者`(string | number)[]`; 所以如果属性值是一个对象则需要采用`JSON.stringify()`转为字符串

### 报错情况1

#### ErrorCodeEg

```vue
<script setup lang="ts">
const userinfo = reactive({ name: 'xm', age: 19, hobby: { computer: true, want: ['a', 'b'] } });


const router = useRouter();
function changeTest(v: number) {
	console.log('v', v);
	router.push({ name: 'login', params: userinfo });
	/*
	不能将类型“{ name: string; age: number; hobby: { computer: boolean; want: string[]; }; }”分配给类型“RouteParamsRaw”。  
	属性“hobby”与索引签名不兼容。ts(2322)
	
	(property) LocationAsRelativeRaw.params?: RouteParamsRaw | undefined
	*/
}
</script>
```

#### 分析

`node_modules\vue-router\dist\vue-router.d.ts`文件

看到`RouteParamsRaw`的类型

```ts
/**
 * @internal
 */
export declare interface LocationAsRelativeRaw {
    name?: RouteRecordName;
    params?: RouteParamsRaw;
}
```


继续查找，以下三行就是关键代码

```ts
export declare type RouteParamsRaw = Record<string, RouteParamValueRaw | Exclude<RouteParamValueRaw, null | undefined>[]>;

/**
 * @internal
 */
export declare type RouteParamValue = string;

/**
 * @internal
 */
export declare type RouteParamValueRaw = RouteParamValue | number | null | undefined;
```

关键是第一行代码， `Record`作为`ts`的映射类型， `Exclude`作为`ts`的过滤类型过滤`T`中可以赋值给`K`的类型

```
export declare type RouteParamsRaw = Record<string, RouteParamValueRaw | Exclude<RouteParamValueRaw, null | undefined>[]>;
```

- `Record`解读

```ts
interface people {
    name: string,
    age: number
}

type RecordResult1 = Record<string, people>;

/*

interface people {
    name: string,
    age: number
}

type RecordResult1 = Record<string, people>;

*/

const a: RecordResult1 = { userinfo: { name: 'xm', age: 18 } }
```

- `Exclude`解读

```
type RouteParamValueRaw = string | number | null | undefined;

type ExcludeRes = Exclude<RouteParamValueRaw, null | undefined>[] // (string | number)[]
```

最终的类型为：

```ts
export declare type RouteParamsRaw = Record<string, RouteParamValueRaw | Exclude<RouteParamValueRaw, null | undefined>[]>;

{
  [X:string]: string | number | null | undefined
} | {
 [X:string]: (string | number)[]
}
```

所以结论：**`params`的值必须为是一个对象，且对象的属性名必须为字符串，属性值可以是`string | number | null | undefined`或者`(string | number)[]`，所以对于对象需要采用`JSON.stringify()`转为字符串**


### 报错情况2

![params-lost](https://cos.dwxzbz.com/vue3/VueRouterV4/params-lost.jpg)

[官方解答](https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22)


#### 解决方案

1. 将数据放在本地存储或`pinia`、`vuex`状态管理器中，共多个页面共享
2. 通过`query`传参，或者将数据放到路由参数上(即：动态路由传参)
3. 使用`state`将其保存到`history`上，通过`window.history.state`获取

```vue
<script setup lang="ts">
const userinfo = reactive({ name: 'xm', age: '19', hobby: { computer: 'true', want: ['a', 'b'] } });
const router = useRouter();

function changeTest() {
	router.push({ name: 'register', state: { name: userinfo.name, age: userinfo.age, hobby: JSON.stringify(userinfo.hobby) } });
}
</script>

<template>
	<router-link :to="{ name: '/login', state: { name: userinfo.name, age: userinfo.age, hobby: JSON.stringify(userinfo.hobby) } }">登录</router-link>
	<button @click="changeTest">注册</button>
</template>
```


## `path`跳转与`query`传参

### 说明

使用`query`传的参数以`?`形式拼接在地址后面

- EG: 
```sh
http://192.168.100.106:3345/login/xm/19/%7B%22computer%22:%22true%22,%22want%22:[%22a%22,%22b%22]%7D
```

### EG

- 路由跳转

```vue
<script setup lang="ts">
const userinfo = reactive({ name: 'xm', age: '19', hobby: { computer: 'true', want: ['a', 'b'] } });

const router = useRouter();

function changeTest(v: number) {
	if (v === 1) {
		router.push({ name: 'login', params: { name: userinfo.name, age: userinfo.age, hobby: JSON.stringify(userinfo.hobby) } });
	} else {
		router.push({ path: '/register', query: { name: userinfo.name, age: userinfo.age, hobby: JSON.stringify(userinfo.hobby) } });
	}
}
</script>

<template>
	<div>
		<el-button type="primary" plain @click="changeTest(1)">登录</el-button>
		<el-button type="primary" plain @click="changeTest(2)">注册</el-button>
		<RouterLink to="/register">跳转注册页面</RouterLink>
	</div>
	<RouterView></RouterView>
</template>

<style scoped></style>
```

- 对应的组件内获取传递的参数

> 通过`useRoute`的`.query`方法获取

```vue
<template>
	<div>注册界面</div>
</template>

<script setup lang="ts">
const route = useRoute();
console.log('params注册', route.query, window.history.state);
</script>

<style></style>
```

- ResultEG：

![query](https://cos.dwxzbz.com/vue3/VueRouterV4/query.png)


### 报错情况1

```ts
router.push({ path: '/register', query: { name: true, age: { a: 1 } } });
// 不能将类型“true”分配给类型“LocationQueryValueRaw | LocationQueryValueRaw[]”
```

#### 分析

`node_modules\vue-router\dist\vue-router.d.ts`文件

```ts
/**
 * @internal
 */
export declare interface RouteQueryAndHash {
    query?: LocationQueryRaw;
    hash?: string;
}
```

查找`LocationQueryRaw`，可以看到:

```ts
export declare type LocationQueryRaw = Record<string | number, LocationQueryValueRaw | LocationQueryValueRaw[]>;

export declare type LocationQueryValue = string | null;

export declare type LocationQueryValueRaw = LocationQueryValue | number | undefined;
```

所以可以得知`query`传参必须为一个对象，对象的属性名为字符串或数字，对象的属性值必须为`string | number | null | undefined`或者`(string | number | null | undefined)[]`; 所以如果属性值是一个对象则需要采用`JSON.stringify()`转为字符串


# 重定向和别名

## 重定向

同样和`vue-routerv3`版本没多大区别，可以直接通过对象`{path:'路由路径'}`或者`{name:'路由名称'}`跳转

```ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		// redirect: { path: '/register' },
		redirect: { name: 'register' }
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'register',
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;
```

也可以是一个方法，返回重定向目标

```ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		redirect: () => {
			return { path: '/login/1/2/3' };
		},
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'registers',
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;
```


## 别名

和`vue-router3`不同，由于[官方解答](https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22)的修复，根据[官方文档](https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html)得知**如果路由中包含参数，则别名也必须含有对应的参数**

```ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const StaticRoutes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		component: () => import('@views/IndexView.vue'),
		children: [
			{
				path: '/login/:name/:age/:hobby',
				name: 'login',
				props: true,
				alias: '/logins/:name/:age/:hobby',
				component: () => import('@views/Login/LoginView.vue'),
			},
			{
				path: '/register',
				name: 'registers',
				component: () => import('@views/Register/RegisterView.vue'),
			},
		],
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes: StaticRoutes,
});

export default router;
```