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

pinia简单使用

新命令-创建vue3项目

vue create 方式使用脚手架创建项目,vue cli处理,
vue3后新的脚手架工具create-vue 使用npm init vue@latest 命令创建即可。

在这里插入图片描述

在pinia中,将使用的组合式函数识别为状态管理内容
自动将ref 识别为stste,computed 相当于 getters,function 相当于 actions

export const useCounterStore = defineStore('counter', () => {const count = ref(10)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return { count, doubleCount, increment } //导出的数据
})

在vue里面直接引入使用使用

<script setup>import {useCounterStore} from "../stores/counter"// useCounterStore是引入defineStore的结构,需要执行 调用并赋值保存,直接使用。const countStore=useCounterStore()
</script>
<template><div class="about"><h1>count:{{ countStore.count }}</h1><h1>2*count:{{ countStore.doubleCount }}</h1></div>
</template>
http://www.lryc.cn/news/217644.html

相关文章:

  • 数据库进阶教学——数据库故障恢复(日志文件)
  • Leetcode 73 矩阵置0
  • Rust学习日记(二)变量的使用--结合--温度换算/斐波那契数列--实例
  • html各个标签的使用
  • android 混淆
  • 旋转链表(C++解法)
  • AcWing 134:双端队列
  • Spring Cloud Gateway 重写 URL
  • 【C语法学习】10 - scanf()函数
  • ffmpeg mp3截取命令,视频与mp3合成带音频视频命令
  • 文件夹还在,里面文件没了?问题这样解决
  • 使用 OpenCV 和 Tesseract OCR 进行车牌识别
  • What exactly are the practices involved in DevOps?
  • Spring底层原理(五)
  • 算法的基本概念(数据结构与算法)
  • 高阶数据结构学习——LRU Cache
  • 代码冲突解决
  • c/c++程序的内存开辟时 的内存情况
  • 【linux常用命令+vi编辑器_2023.11.3】
  • okhttp post请求 header post参数加密遇到的两个问题
  • 什么是Webpack的loader和plugin?它们的作用是什么?
  • ESXi for ARM 最新下载地址
  • 2. 网络之网络编程
  • 工作数字化的中国历程 | 从 OA 到 BPM 到数字流程自动化
  • 6-1 二叉排序树查找操作
  • 服务上千家企业,矩阵通2.0重磅上线,全链路管理新媒体矩阵
  • 【代码随想录】算法训练计划11
  • Jmeter之JSR223
  • c++23中的新功能之十八新增的属性
  • 动手学深度学习:1.线性回归从0开始实现