Vue 全局状态管理新宠:Pinia实战指南

文章目录


前言

随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。


全局状态管理

基本步骤:

clike 复制代码
1.npm install pinia
2.main.js 引入注册
3.src下创建对应状态管理目录store(名不能改变)
4.store中定义user.js
5.在vue中使用

pinia

  • Pinia 是 Vue.js 的一个状态管理库,它提供了一种更简单、更直观的方式来管理 Vue 应用的状态。
  • Pinia是 Vue 的存储库,它允许您跨组件/页面共享状态,与vuex功能一样。

1、安装:
npm install pinia
2、main.js 引入注册:

js 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Axios from 'axios'
// 第一步:引入pinia
import {createPinia} from 'pinia'

var app = createApp(App)
app.config.globalProperties.$axios = Axios

// 第二步:创建pinia
const pinia = createPinia()
// 第三步:向vue中注册安装pinia
app.use(pinia)

app.use(router).mount('#app')

3、src下创建对应状态管理目录store(名不能改变),并定义user.js:

  • 在store中创建对应状态管理对象,定义user.js
  • Store 是使用 defineStore() 定义的,并且它需要一个唯一名称,作为第一个参数传递
  • 这个 name ,也称为 id ,是必要的,Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use... 是跨可组合项的约定
  • // defineStore('user',{}) user就是这个仓库的名称name
    4、pinia在vue中使用:

1) 引入,在需要的vue文件中,引用仓库并获取对象:

  • import {userStore} from '../store/user'
  • let userstore = userStore();

2) 取值方式:

  • userstore.userid

3) 直接修改数据:

  • userstore.userid = x

4) $patch方法修改,修改相应的属性值,修改多个值,状态会统一执行一次:

js 复制代码
//使用$patch方法  以对象的形式一次性修改
const editAll = () => {
  userInfoStore.$patch({
	  username: "鸭蛋",
	  age: 21,
 });

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
lqj_本人6 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式