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

🕗 发布于 2024-12-07 17:51 前端 vue.js

北海道富士山景色

🌈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 Store
    const newName = ref(''); // 创建响应式变量

    const updateUserName = () => {
      userStore.updateName(newName.value); // 更新名字
      newName.value = ''; // 清空输入框
    };

    return {
      userStore, // 返回用户 Store
      newName,
      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中先获取store
    const userStore = useUserStore(); // 使用 User Store先取到值
    //在tmplate中直接修改
    <button @click="userStore.name = 'John'">Set Name to John</button>

批量修改

    <button @click="updateUser">通过$patch修改name和age</button>
     //批量修改，通过path
    const 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 Store
    const newName = ref(''); // 创建响应式变量
    //直接修改
    const updateUserName = () => {
      userStore.updateName(newName.value); // 更新名字
      newName.value = ''; // 清空输入框
    };
    //批量修改，通过path
    const updateUser = () => {
      userStore.$patch({
        name: 'Martin', // 批量修改名字
        age: 88,        // 批量修改年龄
      });
    };

    return {
      userStore, // 返回用户 Store
      newName,
      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 Store
    const newName = ref(''); // 创建响应式变量
    //直接修改
    const updateUserName = () => {
      userStore.updateName(newName.value); // 更新名字
      newName.value = ''; // 清空输入框
    };
    //批量修改，通过path
    const updateUser = () => {
      userStore.$patch({
        name: 'Martin', // 批量修改名字
        age: 88,        // 批量修改年龄
      });
    };

    return {
      userStore, // 返回用户 Store
      newName,
      updateUserName,
      updateUser
    };
    
  },
};
</script>
<style scoped>
.container {
  background-color: #e0f7fa; /* 淡蓝色背景 */
  padding: 20px; /* 添加一些内边距 */
  border-radius: 8px; /* 可选：添加圆角 */
}
</style>

💡 Tips小知识点

修改数据的方式区别：
1、直接操作两个变量修改name和age
2、通过 $patch批量修改name和age

直接修改会触发两次vue的事件，类似于watch，通过 $patch修改无论结构内部有多少属性，也只会触发一次vue的事件，性能会更好。

💪无人扶我青云志，我自踏雪至山巅。
在这里插入图片描述

原文地址：https://blog.csdn.net/qq_42476938/article/details/144286313

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【软件安全】软件安全设计规范，软件系统安全设计制度（Word原件）
下一篇：基于单片机的输液速度监控系统设计

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14