pinia简单使用

news/2024/7/10 0:36:11 标签: javascript, vue.js, 开发语言, vue

vue3_0">新命令-创建vue3项目

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

在这里插入图片描述

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

javascript">export const useCounterStore = defineStore('counter', () => {
  const count = ref(10)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment } //导出的数据
})

vue_19">在vue里面直接引入使用使用

javascript"><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.niftyadmin.cn/n/5148005.html

相关文章

基于B样条的FFD自由变换原理与C++实现

原理&#xff1a; https://blog.csdn.net/shandianfengfan/article/details/113706496 https://blog.csdn.net/qq_38517015/article/details/99724916 https://blog.csdn.net/qq_38517015/article/details/99724916 三次B样条 cubicBSplineFFD .h #pragma once #include &quo…

MTK联发科天玑9000旗舰5G移动平台处理器_MT6983芯片定制开发

MT6983天玑9000采用台积电4纳米工艺制程&#xff0c;CPU采用“134”三丛集Armv9架构&#xff0c;APU性能提升&#xff0c;ISP处理速度提升&#xff0c;最高支持3.2亿像素摄像头&#xff0c;采用Mali-G710十核GPU&#xff0c;搭载R16 5G调制解调器。 MT6983天玑9000芯片基本概…

MYSQL 8.0 配置CDC(binlog)

CDC&#xff08;Change Data Capture&#xff09;即数据变更抓取&#xff0c;通过源端数据源开启CDC&#xff0c;ROMA Connect 可实现数据源的实时数据同步以及物理表的物理删除同步。这里介绍通过开启Binlog模式CDC功能。 注意&#xff1a;1、使用MYSQL8.0及以上版本。 2、不…

CSDN规则详解(一)

文章目录 前言CSDN博客用户准则总则博客注册博客行为规则被投诉侵权用户处理规则附则 博客积分规则博客等级博客VIP文章说明后记 前言 CSDN是一个专业的技术社区&#xff0c;不仅可以分享自己的技术经验&#xff0c;还可以向其他行业专业人士学习。在CSDN上写出优秀的博客可以…

nginx配置访问时间控制以及自定义错误页面

我们的需求是&#xff0c;11月的5号至11号&#xff0c;工作日的8点至18点可以访问&#xff0c;5号&#xff0c;11号全天不可访问。 准备好自定义错误页面&#xff0c;并将页面放到nginx根目录的html目录下。 编写配置文件 location / {#通过$time_local获取系统时间&#xff…

vue2.0 打包,nginx部署

1、修改这里为空 否则报错&#xff1a;vue is undefined 2、修改为hash&#xff0c;重点&#xff1a;打包dist文件运行&#xff0c;必须这样 3、安装ngnix&#xff0c;重点&#xff1a;使用node的包&#xff1a;httpserve&#xff0c;失败 4、重点&#xff1a;配置代理转发 前端…

基于深度学习之基于KNN算法智慧体育检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 智慧体育检测系统是一种基于K最近邻&#xff08;KNN&#xff09;算法的人工智能系统&#xff0c;旨在分析和评估个体…

使用FileSystemWatcher监听文件多次触发Changed事件

今天遇到一个问题&#xff0c;使用FileSystemWatcher类监听文件的时候&#xff0c;我保存了一次文件&#xff0c;但是触发了两次的Changed事件。很奇怪的问题&#xff0c;特此记录。 我定义了一个文件&#xff0c;使用FileSystemWatcher类监听文件的改变&#xff0c;保存文件时…