【vue3 for beginner】Pinia基本用法：存储user的信息

北海道富士山景色

🌈Don’t worry , just coding!
内耗与overthinking只会削弱你的精力，虚度你的光阴，每天迈出一小步，回头时发现已经走了很远。

📗概念

Pinia 简介

Pinia 是一个用于 Vue.js 应用的状态管理库，是 Vuex 的替代品。它提供了一个简单、直观的 API 来管理应用的状态，特别适用于 Vue 3 和 Composition API。Pinia 设计为轻量级且易于使用，支持模块化、类型推导和更好的开发体验。
Pinia啥时候用？
通常是有全局的生命周期时使用，如用户的login信息等。
如果是组件内部的数据，不需要用Pinia，只要维护在组件内就可以了。

主要特点

轻量级：比 Vuex 更少的代码和更简单的 API。
模块化：支持将状态分割成多个 store，便于管理。
TypeScript支持：内置支持 TypeScript，提供类型推导。
热重载：在开发模式下支持热重载，提升开发效率。
与 Vue Router集成：可以轻松管理路由状态。

Pinia 的基本用法

安装 Pinia，取决于你使用的包管理工具

npm install pinia

或

yarn add pinia

创建 Pinia Store
在 Vue 应用中创建一个 Pinia 实例，并用export导出一个变量名为useMainStore的store。
我们用user来存储用户的信息并交给Pinia管理。
src/stores/user.js

// stores/user.store.js
import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({name: 'John Doe', // 初始名字age: 25,          // 初始年龄}),actions: {updateName(newName) {this.name = newName; // 更新名字},incrementAge() {this.age++; // 年龄加 1},},
});

在 Vue 应用中使用 Pinia，找到main.js文件将 Pinia 实例添加到 Vue 应用中。

// main.js
import {createApp} from 'vue'
import App from './App.vue'
// 第一步：引入pinia
import {createPinia} from 'pinia'const app = createApp(App)
// 第二步：创建pinia
const pinia = createPinia()
// 第三步：安装pinia
app.use(pinia)
app.mount('#app')

使用 Store
在组件中，使用 useMainStore 来访问和修改状态。

User.vue

<template><div><h1>User Info</h1><p>Name: {{ userStore.name }}</p><p>Age: {{ userStore.age }}</p><button @click="userStore.incrementAge">Increase Age</button><input v-model="newName" @blur="updateUserName" placeholder="Change name" /></div>
</template><script>
//import { useUserStore } from '../stores/user'; // 导入 User Store
import {useUserStore} from '@store/user'
import { ref } from 'vue';export default {setup() {const userStore = useUserStore(); // 使用 User Storeconst newName = ref(''); // 创建响应式变量const updateUserName = () => {userStore.updateName(newName.value); // 更新名字newName.value = ''; // 清空输入框};return {userStore, // 返回用户 StorenewName,updateUserName,};},
};
</script>

App.vue

<template><User/></template><script setup lang="ts" name="App">import User from './components/User.vue'</script>

store

Store是一个保存：状态、业务逻辑的实体，每个组件都可以读取、写入它。

它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods

修改数据的三种方式

直接修改

	//script中先获取storeconst userStore = useUserStore(); // 使用 User Store先取到值//在tmplate中直接修改<button @click="userStore.name = 'John'">Set Name to John</button>

批量修改

    <button @click="updateUser">通过$patch修改name和age</button>//批量修改，通过pathconst updateUser = () => {userStore.$patch({name: 'Martin', // 批量修改名字age: 88,        // 批量修改年龄});};return {updateUser,userStore}// 返回用户 Store和方法

借助actions

// stores/user.store.js
import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => ({name: 'John Doe', // 初始名字age: 25,          // 初始年龄}),actions: {updateName(newName) {this.name = newName; // 更新名字},incrementAge() {this.age++; // 年龄加 1},},
});

三种修改方式效果展示

只修改User.vue即可

<template><div><h1>User Info</h1><p>Name: {{ userStore.name }}</p><p>Age: {{ userStore.age }}</p><button @click="userStore.incrementAge">Increase Age</button><button @click="userStore.name = 'John'">直接修改name为John</button><input v-model="newName" @blur="updateUserName" placeholder="Change name" /><button @click="updateUser">通过$patch修改name和age</button></div>
</template><script>
//import { useUserStore } from '../stores/user'; // 导入 User Store
import {useUserStore} from '@store/user'
import { ref } from 'vue';export default {setup() {const userStore = useUserStore(); // 使用 User Storeconst newName = ref(''); // 创建响应式变量//直接修改const updateUserName = () => {userStore.updateName(newName.value); // 更新名字newName.value = ''; // 清空输入框};//批量修改，通过pathconst updateUser = () => {userStore.$patch({name: 'Martin', // 批量修改名字age: 88,        // 批量修改年龄});};return {userStore, // 返回用户 StorenewName,updateUserName,updateUser};},
};
</script>

页面效果

在这里插入图片描述
这里我给页面加上淡蓝色的背景，稍微美观一些。
增加了背景色的User.vue代码如下。

<template><div class="container"> <h1>User Info</h1><p>Name: {{ userStore.name }}</p><p>Age: {{ userStore.age }}</p><button @click="userStore.incrementAge">Increase Age</button><button @click="userStore.name = 'John'">直接修改name为John</button><input v-model="newName" @blur="updateUserName" placeholder="Change name" /><button @click="updateUser">通过$patch修改name和age</button></div>
</template><script>
//import { useUserStore } from '../stores/user'; // 导入 User Store
import {useUserStore} from '@store/user'
import { ref } from 'vue';export default {setup() {const userStore = useUserStore(); // 使用 User Storeconst newName = ref(''); // 创建响应式变量//直接修改const updateUserName = () => {userStore.updateName(newName.value); // 更新名字newName.value = ''; // 清空输入框};//批量修改，通过pathconst updateUser = () => {userStore.$patch({name: 'Martin', // 批量修改名字age: 88,        // 批量修改年龄});};return {userStore, // 返回用户 StorenewName,updateUserName,updateUser};},
};
</script>
<style scoped>
.container {background-color: #e0f7fa; /* 淡蓝色背景 */padding: 20px; /* 添加一些内边距 */border-radius: 8px; /* 可选：添加圆角 */
}
</style>