vue3.x教程-Pinia状态管理-读取数据-马育民老师

# 说明

- 很多管理系统，一般右上角的 `用户信息组件` 显示当前用户昵称，当点击 【修改昵称】 时，显示 `修改昵称组件`
- 修改昵称后，`用户信息组件` 也会同时改变

这就涉及到 **2个组件共享昵称数据**，应该使用Pinia进行状态（用户昵称）管理，如下图：

[![](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-03-08_22-05-31.png)](https://www.malaoshi.top/upload/pic/vue/Snipaste_2022-03-08_22-05-31.png)

在 Rename组件中修改昵称，User组件中的昵称会跟着改变

# 代码执行流程

[![](/upload/0/0/1IX3HLy8dlhW.png)](/upload/0/0/1IX3HLy8dlhW.png)

# 创建 User 组件

在 `src/components` 目录下创建 `User.vue` 文件，内容如下：

```
<template>
	<div class="c1">
		<h1>User组件</h1>
		昵称：
	</div>
</template>

# 创建 Rename 组件

在 `src/components` 目录下创建 `Rename.vue` 文件，内容如下：

```
<template>
	<div class="c1">
		<h1>Rename组件</h1>
		昵称：<input type="text" >
		<button @click="rename">修改</button>
	</div>
</template>

# 修改 App.vue

修改 `App.vue` 文件，将 2个组件显示到页面上

代码如下：

```
<template>
  <User></User>
  <br>
  <Rename></Rename>
</template>
<script setup lang="ts">
import Rename from './components/Rename.vue'
import User from './components/User.vue'
</script>
<style scoped>

</style>
```

# 定义Store

选项式：类似 Vue 选项式 API，结构清晰易上手。
组合式：类似 Vue3 组合式 API，直接使用 ref/reactive，更灵活。

### 创建文件

1. 在 `src` 下创建 `stores` 文件夹
2. `stores` 文件夹创建 `User.ts` 文件

### User.ts代码（vue2 选项式）

##### 写法1
```
import {defineStore} from 'pinia'

/*
 变量命名
 一般情况：use+文件名+Store
 复杂情况：use+业务名+Store
 */
/*
 定义store
 选项式：
 第一个参数是唯一标识
 第二个参数是对象
 */
export const useUserStore = defineStore('user',{
	// 定义State状态：存储初始数据，必须是函数且返回对象
	state(){
		return {
			nickname: '李雷'
		}
	}
})
```

##### 写法2

```
export const useUserStore = defineStore('user',{
	// 定义State状态：存储初始数据，必须是函数且返回对象
	state:()=>{
		return {
			// 选项式，不需要定义成ref，会自动处理
			nickname: '李雷'
		}
	}
})
```

##### 写法3

```
export const useUserStore = defineStore('user',{
	// 定义State状态：存储初始数据，必须是函数且返回对象
	state:function(){
		return {
			// 选项式，不需要定义成ref，会自动处理
			nickname: '李雷'
		}
	}
})
```

### User.ts代码（vue3 组合式）

```
/*
 定义store，vue3组合式写法
 第一个参数是唯一标识
 第二个参数是对象
 */
export const useUserStore = defineStore('user',()=>{
	return {
		// 组合式，推荐定义成ref。不定义成ref，会自动处理，但可能出问题
		nickname: ref('李雷')
	}
})
```

# 修改 User 组件

### 新加代码

```
// 导入store
import {useUserStore} from '@/stores/User.ts'
// 创建store对象
const userStore = useUserStore()
// 使用store中的state状态中的数据
console.log('nickname:',userStore.nickname)
```

### 完整代码

```
<template>
	<div class="c1">
		<h1>User组件</h1>
		昵称：{{userStore.nickname}}
	</div>
</template>

# 修改 Rename 组件

### 新增代码

```
// 导入store
import {useUserStore} from '@/stores/User.ts'
// 创建store对象
const userStore = useUserStore()
// 使用store中的state状态中的数据
console.log("Rename.vue----nickname:",userStore.nickname)
```

### 完整代码
```
<template>
	<div class="c1">
		<h1>Rename组件</h1>
		昵称：<input type="text" v-model="userStore.nickname">
		<button @click="rename">修改</button>
	</div>
</template>

原文出处：http://malaoshi.top/show_1GW3iT5KGrxt.html