当前位置: 首页 > news >正文

pinia状态管理使用

1。安装

npm install pinia

创建文件夹和文件

在这里插入图片描述
代码

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0,data:{}}},// 也可以这样定义// state: () => ({ count: 0 })actions: {increment() {this.count++},},
})

3、使用
main.js文件引入

// 状态管理
import { createPinia } from 'pinia'
const pinia = createPinia()app.use(pinia)

使用,下面赋值,页面就可以这样用拉
{{ counter.data.name}}

  import { useCounterStore } from '../../../stores/counter'// 获取 store 实例const counter = useCounterStore()counter.data.name = "666666"

在这里插入图片描述

相关文章:

  • 使用CRTP实现单例
  • 22、web场景-web开发简介
  • 弦序参量(SOP)
  • 详解Innodb一次更新事物的执行过程
  • 【概率论基本概念02】最大似然性
  • 【MySQL成神之路】MySQL函数总结
  • 【C语言干货】free细节
  • RocketMQ 索引文件(IndexFile)详解:结构、原理与源码剖析
  • 用 Python 实现了哪些办公自动化
  • 力扣第157场双周赛
  • 湖北理元理律师事务所债务优化方案:让还款与生活平衡的艺术
  • 基于PyTorch的残差网络图像分类实现指南
  • SGMD辛几何模态分解
  • 【MATLAB代码】主动声纳多路径目标测距与定位,测距使用互相关,频率、采样率可调、声速可调,定位使用三边法|订阅专栏后可直接查看源代码
  • 第一章 半导体基础知识
  • 华为OD机试真题——出租车计费/靠谱的车 (2025A卷:100分)Java/python/JavaScript/C/C++/GO最佳实现
  • 网络安全--PHP第二天
  • 华为OD机试真题——启动多任务排序(2025B卷:200分)Java/python/JavaScript/C/C++/GO最佳实现
  • Qt for Android 安卓低功耗蓝牙(BLE)开发环境搭建
  • JavaWeb:SpringBoot工作原理详解
  • 网站大数据怎么做/广州seo做得比较好的公司
  • 民营医院建设网站/北京百度seo服务
  • 建设维护网站运营方案/如何免费做视频二维码永久
  • 威海医院网站制作/网店推广策划方案
  • 郑州市做网站的公/网站seo内容优化
  • 网站更新维护/社群推广平台