## setup函数

### 说明

setup是一个专门用于组合式 API 的特殊钩子函数，可以理解为一个生命周期函数，在beforeCreate之前。
vue3中代替beforeCerate、created；
在setup中直接声明变量，此变量并不会是响应式的；且setup中必须有返回值



> 1、无法访问组件中的数据和方法，无法获取this
> 2、在data和methods中可以访问setup中的数据或方法，反之在setup中无法获取data和methods中的数据或方法

### setup参数

#### 第一个参数属性props

```typescript
<template>
  <h1 @click="cat">hello组件</h1>
</template>

<script>
export default {
  name:'HelloWordVue',
  props:['msg'],
  setup(props){
    function cat(){
      console.log('1',props)//1 Proxy {msg: '测试msg'}
    }
    return{
      cat,
    }
  }
}
</script>

<style>

</style>
```

#### 第二个参数context

![context](https://dev.dwxzbz.com/blogphoto/Vue3/setup/context.jpg)

1.  通过context.emit()触发自定义事件

*   父组件

```
<template>
	
	<p @click="addnum">{{ a }}</p>
	<hello-word-vue msg="测试msg" @myfn="addnum" />
</template>

<script>
import { ref } from "vue";
import HelloWordVue from "./components/HelloWord.vue";
export default {
	name: "App",
	setup() {
		let a = ref(0);
		function addnum() {
			console.log("a", a);
			/* console.log
        a RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 0, _value: 0}
            dep: Set(1)
            [[Entries]]
            n: 0
            w: 0
            size: 1
            [[Prototype]]: Set
            __v_isRef: true
            __v_isShallow: false
            _rawValue: 1
            _value: 1
            value: 1
            [[Prototype]]: Object
      */
			//  需要通过.value形式获取到响应式数据，在此基础上操作
			a.value++;
		}
		return {
			a,
			addnum,
		};
	},
	components: {
		HelloWordVue,
	},
};
</script>

<style></style>

```

*   子组件

```ts
    <template>

      <h1>hello组件</h1>
    </template>

    <script>
        export default {
        name: "HelloWordVue",
        props: ["msg"],
        setup(props, context) {
        console.log(context);
        function cat() {
        context.emit("myfn")
        }
        return {
        cat,
        };
        },
        };
    </script>

    <style></style>
```

1.  若子组件中没有props接受属性，则context.attrs会接受传入的属性
    ![attrs](https://dev.dwxzbz.com/blogphoto/Vue3/setup/attrs.png)

```ts

<template>

  <h1>hello组件</h1>
</template>
<script>
export default {
    name: "HelloWordVue",
    // props: \["msg"],
    setup(props, context) {
        console.log(context);
        function cat() {
        context.emit("myfn")
    }
     return {
        cat,
     };
    },
};
</script>

<style></style>
```

1.  获取插槽内的内容

> 通过`context.slots.before()`获取插槽的内容

```ts
    <template>
      <h1>hello组件</h1>
    </template>

    <script>
        export default {
        	name: "HelloWordVue",
        	props: ["msg"],
        	setup(props, context) {
        		console.log(context);
                console.log(context.slots.before())
        		function cat() {
        			context.emit("myfn")
        		}
        		return {
        			cat,
        		};
        	},
        };
    </script>

    <style></style>
```

![slots](https://dev.dwxzbz.com/blogphoto/Vue3/setup/slots.jpg)

### setup函数的返回值

#### 对象形式

对象内是自定义的数据

#### 函数

##### 说明

返回一个函数(渲染函数)，可以自定义渲染内容；优先级更高，会覆盖template的内容

##### 语法

```ts
    import {h} from 'vue';

    setup(){
        return ()=>h(渲染的html标签,渲染的内容)
    }
```

##### Eg

```ts
    <template>
      <p>测试</p>
    </template>

    <script>
    import {h} from 'vue';

    export default {
      name: 'App',
      setup(){
        return ()=>h("h1","我是h1标签")
      }
    }
    </script>

    <style>

    </style>
```

VUE3-Setup函数

## 说明
基本和vue2中的没有太大区别



## 文本插值
### 说明
通过双大括号`{{}}`实现

### CodeEG
```vue
<template>

  <div>{{ props.msg.text }}</div>

</template>

<script setup lang="ts">

interface TitleProps {

  msg: {

    title: string;

    text: string;

  };

  navTitle?: number;

}

// const props = defineProps<TitleProps>();

const props = withDefaults(defineProps<TitleProps>(), {

  msg: () => {

    return {

      title: '12',

      text: '组件啊',

    };

  },

  navTitle: 1,

});

</script>

<style scoped></style>
```


## html字符串
### 说明
	通过指令`v-html`实现

### CodeEg
```vue
<template>
  <p v-html="testHtml"></p>
</template>

  

<script setup lang="ts">
const testHtml = `<span>123</span>`
</script>

<style scoped></style>
```

### CodeResult
```html
...
<p><span>123</span></p>
...
```


## 动态绑定多个值
### 说明
通过`v-bind`直接绑定一个对象  

### EG
```vue
<script lang='ts'>
const objtest = {
	name: '小名',
	age: 18
}

</script>
...

<template>
  <div v-bind='objtest'></div>
</template>
```

VUE3-模板语法

# 初始化项目

## 创建项目
> 通过`pnpm create vue@3`




## 创建应用实例与挂载

## 创建实例

> 通过`createApp()`创建应用实例

```
    import { createApp } from 'vue'

    const app = createApp({
      
    })
```

## 挂载实例

### 说明

> 通过`.mount()`挂载, 接受一个实际DOM元素或者css选择器作为参数

```
...
<div id="app"></div>
...
app.mount('#app')
```

### 类型
```
interface App {
  mount(rootContainer: Element | string): ComponentPublicInstance
}
```

参数：实际DOM元素或者CSS选择器(第一个匹配的元素),返回根组件的实例

## 注册组件

### 说明
> 通过`.component()`方法注册组件

### EG
```
app.component('CustomButton', CustomButton)
```

### 类型
```
    interface App {
      component(name: string): Component | undefined
      component(name: string, component: Component): this
    }
```

### 参数说明

1、只传递一个组件名字符串，则返回用该名字注册的组件 | undefined
2、传递组件名及其定义，则注册一个全局组件


# 全局挂载变量  

## 获取组件实例和全局实例  

通过`getCurrentInstance`方法获取

```ts
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'

// proxy: 当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance()

// 这个 global 就是全局实例
const global = appContext.config.globalProperties
</script>
```

## 挂载全局变量

在`main.ts`中通过`app.config.globalProperties.[valueName] = value`实现

```ts

// 添加全局属性 
app.config.globalProperties.loading = false
```

使用：
> 通过`getCurrentInstance`方法获取全局实例后，然后通过`.[valueName]`取值

```ts
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'

// proxy: 当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance()

// global: 全局实例
const global = appContext.config.globalProperties

const loadingType = global.loading
</script>
```

VUE3-创建应用实例与全局挂载变量

# State

## 说明

和`vuex`种的state类似，都是保存`store`的状态



# 创建State初始值

在`ts`种会自动推导其类型

```ts
import { defineStore } from 'pinia';

export default defineStore(
	'userinfoStore',
	() => {
		const username = ref('');
		const rolesname = ref('');
		const token = ref('');
	
		return { username, rolesname, token };
	},
);
```

# State的持久化存储

## 两种方法
1. 手动设置本地存储localStorage
2. 通过插件`pinia-plugin-persist`实现

## 插件实现
### 安装插件
```
pnpm i pinia-plugin-persist
```

### 插件方法

#### SetupStore

##### 开启数据缓存

```ts
import { defineStore } from 'pinia';

export default defineStore(
	'userinfoStore',
	() => {
		const username = ref('');
		const rolesname = ref('');
		const token = ref('');

		return { username, rolesname, token };
	},
	{
		persist: {
			enabled: true, // 开启数据缓存
		}
	}
);

```


#####  高级技巧

> `strategies`存储策略

```ts
interface PersistStrategy {
  key?: string; // 存储的key 默认是 store.$id
  //存储方式 localStorage、sessionStorage (默认: sessionStorage)
  storage?: Storage; 
  // 需要持久化的字段名
  paths?: string[];
}
```

```ts
import { defineStore } from 'pinia';

export default defineStore(
	'userinfoStore',
	() => {
		const username = ref('');
		const rolesname = ref('');
		const token = ref('');

		return { username, rolesname, token };
	},
	{
		persist: {
			enabled: true, // 开启数据缓存
			strategies: [
				{
					// 存储的key
					key: 'userinfo', 
					// 存储方式 localStorage、sessionStorage
					storage: sessionStorage, 
					// 需要持久化的字段名
					paths: ['username', 'rolesname', 'token'], 
				},
			],
		}
	}
);

```

自定义策略

`Storage`的类型

```ts
/*

* 此Web API接口 提供对sessionStorage和localStorage的访问，允许添加、修改或删除存储的数据项

*/
interface Storage {
    /* 返回键值对的数量 */
    readonly length: number;
    /*
     * 如果存在存储的数据就删除全部的
     */
    clear(): void;
    /* 
      * 从sessionStorage或localStorage中通过key取值，如果存在则返回，没有则返回   null 
      */
    getItem(key: string): string | null;
    /** 返回第n个键的名称，如果n大于或等于存储中键/值对的数量，则返回null. */
    key(index: number): string | null;
    /*
     * 对于存在的键值对，就通过key删除
     */
    removeItem(key: string): void;
    /**
     * 设置由key/value标识的键/值对的值，如果之前key不存在，则创建一个新的键/值对
     * 如果无法设置新值，则抛出“QuotaExceededError”DOMException异常。(设置可能会失败，例如，用户已经禁用了站点的存储，或者如果配额已经超过。)
     * key: store.$id,即创建strore时设置的id
     * value: 要设置的值，字符串类型
     */
    setItem(key: string, value: string): void;
    [name: string]: any;
}

```

```ts
import { defineStore } from 'pinia';

const cookiesStorage: Storage = {
	setItem(key, state) {
		console.log('setItem key state', key, state, typeof state)
		/*
		setItem key state 
		userinfoStore 
		
		{"rolesname":"EveryOne","token":"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWF0IjoxNjgxMzA5ODMwLCJleHAiOjE2ODEA2MzB9.ySJZ3CBguR7I9HJJdtCqKri8cRT5EHt3jTpd8jYw"} 
		
		string
		*/
		return sessionStorage.setItem(key, state);
	},
	getItem(key) {
		console.log('getItem key ', key)
		return JSON.stringify({
			tokens: sessionStorage.getItem(key),
		});
	},
	length: 0,
	clear: function (): void {
		console.log('clear')
	},
	key: function (index: number): string | null {
		console.log('index', index)
		return index.toString()
	},
	removeItem: function (key: string): void {
		console.log('key', key)
	}
}

export default defineStore(
	'userinfoStore',
	() => {
		const username = ref('');
		const rolesname = ref('');
		const token = ref('');

		return { username, rolesname, token };
	},
	{
		persist: {
			enabled: true, // 开启数据缓存
			strategies: [
				{
					// 存储的key
					key: 'userinfo', 
					// 存储方式 localStorage、sessionStorage
					storage: sessionStorage, 
					// 需要持久化的字段名
					paths: ['username', 'rolesname'], 
				},
				{
					// 存储方式为自定义的cookiesStorage
					storage: cookiesStorage, 
					// 需要持久化的字段名
					paths: ['token'], 
				},
			],
		}
	}
);


```

### 配置

`store`目录下新建`index.ts`文件

```ts
import { createPinia } from 'pinia';
// 数据持久化插件
import piniaPluginPersist from 'pinia-plugin-persist';

const store = createPinia();
// 注册插件
store.use(piniaPluginPersist);

export default store;

```

`main.ts`中配置

```
import { createApp } from 'vue';
// 引入全局样式文件
import './assets/css/global.less';

import App from './App.vue';
import router from './router';
import store from './pinia';

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

```
### SetupStore中使用
#### 默认情况
- `LoginAndRegister.ts`中使用
> 默认是`sessionStorage`存储，键名为`store`的唯一id，值为store的所有状态数据

```ts
import { defineStore } from 'pinia';

export default defineStore(
	'userinfoStore',
	() => {
		const username = ref('');
		const rolesname = ref('');
		const token = ref('');

		return { username, rolesname, token };
	},
	{
		persist: {
			enabled: true, // 开启数据缓存
			strategies: [
				{
					key: 'userinfo', // 存储的字段名的key
					storage: sessionStorage, // 存储方式 localStorage、sessionStorage
					paths: ['username', 'rolesname', 'token'], // 需要持久化的字段名
				},
			],
		},
	}
);
```


### OptionsStore中使用
#### 默认情况
- `LoginAndRegister.ts`中使用
> 默认是`sessionStorage`存储，键名为`store`的唯一id，值为store的所有状态数据

```
import { defineStore } from 'pinia';

export const userInfoStroe = defineStore('userinfo', {
	state: () => {
		return {
			username: '',
			token: '',
		};
	},
	persist: {
		enabled: true, // 开启数据缓存
		strategies: [
			{
				storage: localStorage, // 存储方式 localStorage、sessionStorage
				paths: ['username', 'token'], // 需要持久化的字段名
			},
		],
	},
});

```


# 修改State
## 直接修改

在确保没有`丢失响应性`时，可以直接通过修改

```vue
<template>
	<div>
		<div>
			<input type="text" v-model="name" />
			<p>{{ name }}</p>
		</div>

		<div>
			<input type="text" v-model="phone" />
			<p>{{ phone }}</p>
		</div>

		<div>
			<button @click="changeName">直接赋值修改name</button>
		</div>
	</div>
</template>



<script setup lang="ts">
import userinfoStore from '@/stores/userinfo.js';
import { storeToRefs } from 'pinia';


const userStore = userinfoStore();
const { name, phone } = storeToRefs(userStore);


function changeName(){
	name.value = 'xm'
}
</script>
```


## 批量修改

### 说明

通过`.$patch()`实现，可以接受一个对象修改部分`state`，或者接受一个函数批量修改集合内部分对象的情况

> 如果直接传入一个对象,则对于state中的任何集合修改（EG：数组中推送、删除、拼接元素）都需要创建一个新集合

```vue
<template>
	<div>
		<div>
			<input type="text" v-model="name" />
			<p>{{ name }}</p>
		</div>

		<div>
			<input type="text" v-model="phone" />
			<p>{{ phone }}</p>
		</div>

		<div>
			<button @click="changeName">直接赋值修改name</button>
			
			<button @click="changePatchObj">patchObj修改</button>
			<button @click="changePatchFn">patchFn修改</button>
			
			<button @click="resertUser">重置</button>
		</div>
	</div>
</template>



<script setup lang="ts">
import userinfoStore from '@/stores/userinfo.js';
import { storeToRefs } from 'pinia';

const userStore = userinfoStore();
const { name, phone } = storeToRefs(userStore);

function resertUser() {
	userStore.$reset();
}

function changeName() {
	name.value = 'xm';
}

function changePatchObj() {
	userStore.$patch({
		name: 'xm',
		phone: '123344',
	});
}


function changePatchFn() {
	userStore.$patch((state)=>{
		console.log('state', state)
		// state.name = 'xk'
	});
}
</script>



```


## 替换State

- 通过`store.$state`设置为新对象来替换整个`state`的状态
- 通过`store.state.value`设置为新对象替换整个`state`的状态

```ts
userStore.$state = {name:'xm',phone:'1212'}
userStore.state.value =  {name:'xm',phone:'1212'}
```


## 重置State

通过`.$reset()`实现

### OptionsStore

#### 说明

在`OptionsStore`中可以直接使用

### SetupStore

#### 说明

在组合式API创建的`Store`中不能直接使用，会报错

```ts
Uncaught Error: 🍍: Store "userinfo" is built using the setup syntax and does not implement $reset().
    at Proxy.$reset (pinia.mjs:1326:27)
    at resertUser (AboutView.vue:80:2)
    at callWithErrorHandling (runtime-core.esm-bundler.js:173:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:182:21)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:345:9)
```


#### 解决方案

自定义`pinia`插件重写`$reset`方法，需要借助`lodash.clonedeep`深度克隆

1. 安装插件`lodash.clonedeep`

```ts
pnpm install lodash.clonedeep -S
```

2. 在`utils/common/storeUtils/`创建`StoreReset.ts`文件

```ts
import cloneDeep from 'lodash.clonedeep';
 
export default function storeReset({ store }) {
  // 深度克隆初始状态
  const initialState = cloneDeep(store.$state);
  // 将`$reset`方法挂载到store实例上，然后通过store.$patch批量修改state
  store.$reset = () => store.$patch(cloneDeep(initialState));
}
```

3. 在`store/index.ts`中注册插件

```ts
import storeReset from '@/utils/common/storeUtils/StoreReset';
import { createPinia } from 'pinia';

const store = createPinia();

// 注册插件
store.use(storeReset);

export default store;
```


# 订阅State变化

## 说明

可以通过`.$subscribe()`方法或`vue`的`watch()`方法

## 特点

*`.$subscribe()`的优点： `subscriptions`只会在`patches`之后触发一次（例如，当使用上面的函数版本时）* ---暂未理解，个人尝试好像都会触发

默认情况下绑定的组件被卸载后，如果需要在组件卸载后保留，需要使用`{ detached: true }`作为`.$subscribe`的第二个参数传入

## EG


```vue
<template>
	<div>
		<div>
			<input type="text" v-model="name" />
			<p>{{ name }}</p>
		</div>

		<div>
			<input type="text" v-model="phone" />
			<p>{{ phone }}</p>
		</div>

		<div>
			<button @click="changeName">直接赋值修改name</button>
			
			<button @click="changePatchObj">patchObj修改</button>
			<button @click="changePatchFn">patchFn修改</button>
			
			<button @click="resertUser">重置</button>
		</div>
	</div>
</template>


<script setup lang="ts">
import { ref, watch } from 'vue';
import userinfoStore from '@/stores/userinfo.js';
import { storeToRefs } from 'pinia';


const userStore = userinfoStore();
const { name, phone } = storeToRefs(userStore);

function resertUser() {
	userStore.$reset();
}

function changeName() {
	name.value = 'xm';
}

function changePatchObj() {
	userStore.$patch({
		name: 'xm',
		phone: '123344',
	});
}


function changePatchFn() {
	userStore.$patch((state)=>{
		console.log('state', state)
	});
}

userStore.$subscribe((mutation, state) => {
   console.log('mutation, state', mutation, state)
  // import { MutationType } from 'pinia'
  /* mutation.type 
      'direct': 直接修改
      'patch object': 通过`$patch()`传入参数为Object
      'patch function': 通过`$patch()`传入参数为函数
  */
  // 与 cartStore.$id 相同
  mutation.storeId // 'userinfo'
  
  // 只在 mutation.type === 'patch object' 才具备
  mutation.payload

  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem('test1', JSON.stringify(state))
})

watch(
  userStore.$state,
  (state) => {
		console.log('watch ', state)
    // 每当它发生变化时，将整个状态持久化到本地存储
    localStorage.setItem('test2', JSON.stringify(state))
  },
  { deep: true }
)
</script>

```

- 直接修改

![subscribeDirect](https://cos.dwxzbz.com/Pinia/subscribeState/subscribeDirect.jpg)

- `$patch`传入对象

![subscribeObj](https://cos.dwxzbz.com/Pinia/subscribeState/subscribeObj.jpg)

- `$patch`传入函数

![subscribeFn](https://cos.dwxzbz.com/Pinia/subscribeState/subscribeFn.jpg)

Pinia-Pinia中的state

# Pinia的概念

具有**组合式api**的状态管理库，类似vuex的状态管理工具



## 特点
1、没有mutations,只有state、getters、actions
2、分模块不需要modules
3、体积小

# 安装
```js
pnpm i pinia
```

# 注册使用
> `main.ts`中注册

```ts
import { createPinia } from 'pinia';

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

# 创建stroe

通过`defineStore`创建, `id`具有全局唯一性

```ts
import { defineStore } from 'pinia';

export const useStore = defineStore('id', {

});
```

# State
## 说明

和vuex中的state一样都是用于存放数据状态，不同在于`pinia`中state的属性值为一个函数，且返回需要管理的状态

## 使用
### OptionsStore
#### 说明

第二个参数直接为对象

```ts
import { defineStore } from 'pinia';

export const userInfoStroe = defineStore('userinfo', {
	state: () => {
		return {
			name: '',
			token: '',
		};
	},
});
```

#### Getters
##### 说明

类比vuex中的getters，同样会根据其依赖的状态缓存

```ts

import { defineStore } from 'pinia';

export const userInfoStroe = defineStore('userinfo', {
	state: () => {
		return {
			name: '',
			token: '',
		};
	},
	getters: {
        deluserinfo: (state) => {
	        state.name='';
	        state.token='';
        }
    },
});


```

#### 传参

通过使其返回值为一个函数实现传参

```ts
getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
```

> 注意点： 此方式会使得其不再根据依赖的状态缓存结果，只是相当于调用函数
> 
### SetupStore

#### 说明

第二个参数为函数，函数内部定义了一些**响应式属性**和方法，然后将其暴露出去

#### 注意点

>-   `ref()` 就是 `state` 属性
-   `computed()` 就是 `getters`
-   `function()` 就是 `actions`

```ts
import { defineStore } from 'pinia';

export const userInfoStroe = defineStore('userinfo', {
	let userinfo = reactive({
			name: '',
			token: '',
	});

    const deluserinfo = function(){
        userinfo.name='';
        userinfo.token='';
    }

	return { userinfo, deluserinfo }
});
```



#### 访问

```vue
...

<script lang="ts" setup>
    import { userInfoStroe } from '../../pinia/LoginAndRegister';
    
    const userStroe = userInfoStroe();
    console.log(11, userStroe.username, userStroe.token);
</script>
```




# Pinia模块化
## 说明
直接书写多个store文件，然后页面引入调用即可


# 解构丢失响应性
## 说明

在`.vue`组件种在使用`userinfoStore()`获取Store的state时，如果采用解构，则需要调用`storeToRefs()`将其包裹避免丢失响应式

- 通过插件添加的属性也会被提取为`ref`
- 并且会跳过所有的 `action` 或非响应式 (不是 `ref` 或 `reactive`) 的属性

## EG

```vue
<template>
	<div>
		<p>{{name}}</p>
		<butten @click="deluserinfo">清除</butten>
	</div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import userinfoStore from '@store/userinfo/userinfo';

const store = userinfoStore();

let { name, token } = storeToRefs(store);

// 对于`action`可以直接解构
let { deluserinfo } = store;
```