首页 > 其他分享 >pinia 初步理解

pinia 初步理解

时间:2023-04-19 14:38:10浏览次数:29  
标签:count const counter 初步 理解 useCounterStore pinia stores store

前提

写法是用的vue3,只是一些简单的写法

stores文件中的counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

actions: increment 的使用

只是单纯调用该方法,actions是可以改变源数据的

mport { useCounterStore } from '@/stores/counter'
const store = useCounterStore()

const handleClick = () => {
  store.increment()
}

getters:doubleCount 的使用

我的理解,getters是用来改造数据的,非元数据,改造过的可以直接调用

<template>
  <div class="right-view">
    <div>2倍count值:{{ store.doubleCount }}</div>
  </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter'

const store = useCounterStore()
</script>

state:count

源数据

<template>
  <div class="right-view">
    <div>当前count值:{{ store.count }}</div>
  </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter'

const store = useCounterStore()
</script>

标签:count,const,counter,初步,理解,useCounterStore,pinia,stores,store
From: https://www.cnblogs.com/zongkm/p/17333174.html

相关文章

  • 个人理解指针的定义
    指针就类似于光标,你可以随时移动到你想移动到的位置,在相对底层来将,就是将光标移动到了某一个内存地址,那么为什么&就可以取到内存地址还需要指针呢,&仅仅只可以取到当前的内存地址,那我们用指针的目的是什么,说白了指针是一个我们随时想移动到某个位置的东西,但是&他不知道你此时此刻这......
  • 深度学习--梯度下降再理解+线性回归
    深度学习--梯度下降再理解+线性回归梯度下降梯度下降的对象是模型的参数,即权重w,偏置项b,通过寻找合适的参数使模型的loss值最小Loss函数是关于输入,输出,权重,偏置项的函数,即:loss=(y-(wx+b))^2。loss值最小,y与wx+b相似。个人思考:如果训练的数据量越大,识别的准确率是越大还是越......
  • Vue进阶(六十二):理解$nextTick()
    一、实例介绍有一个div,默认用了v-if隐藏,点击按钮之后,改变v-if的值让他显示出来,并且取到div中的值:<divid=app><divid="div"v-if="showDiv">我是显示文本</div><button@click="showAndGetText">获取内容</button></div><script>va......
  • C语言 正确理解二维数组首地址
    在一维数组中,数组名表示的是数组第一个元素的地址inta[10],*p=a;那么二维数组呢inta[3][4],a表示的是元素a[0][0]的地址吗?不是!二维数组就是一维数组,二维数组a[3][4]就是有三个元素a[0]、a[1]、a[2]的一维数组,所以数组a的第一个元素不是a[0][0],而是a[0],所以数组名......
  • 12.深入理解 Http 协议
    深入理解Http协议一、Http协议入门1.1什么是http协议http协议:对浏览器客户端和服务器端之间数据传输的格式规范二、查看http协议的工具1)使用火狐的firebug插件(右键->firebug->网络)2)使用谷歌的“审查元素”2.1http协议内容请求(浏览器-》服务器)......
  • 10.深入理解Servlet
    深入理解Servlet课程目标动态资源与静态资源区别1.servlet三及相关接口简介2.servet执行过程3.servlet路径映射4.servlet生命周期(重点)--理解(重点)5.Servlet自动加载6.Servlet线程安全7.Servlet相关接口详解8.ServletContext对象--知识点一、Web项......
  • Socket是什么/怎么理解Socket
    Socket先来看一下百度百科对于Socket的介绍:套接字(socket)是一个抽象层,应用程序可以通过它发送或接收数据,可对其进行像对文件一样的打开、读写和关闭等操作。套接字允许应用程序将I/O插入到网络中,并与网络中的其他应用程序进行通信。网络套接字是IP地址与端口的组合。我们将一个小......
  • C# Async,Await简单理解(应用层次)
    这里我就不给大家去研究这两上下文关键字的il实现了,感兴趣的朋友可以自己去用ildasm分析一下。我写这篇文章只是想强调微软官方文档上写的一点: async和await并没有开辟新的线程,我们来分别执行一下io密集型和cpu密集型代码 :staticvoidMain(string[]args){Stopwatchst......
  • shell编程-位置参数的理解
    Linux——$1、$#、$@、$0、$1、$2探岳精神于 2018-07-1921:59:45 发布29675 收藏 66分类专栏: 测试开发 测试开发专栏收录该内容70篇文章5订阅订阅专栏$1在shell中称为“位置参数”,表示传入的第1个参数(第1个入参)。test-z$1是一个判断表达......
  • 一段话理解正向代理和反向代理的区别
    正向代理和反向代理的区别 虽然正向代理服务器和反向代理服务器所处的位置都是客户端和真实服务器之间,所做的事情也都是把客户端的请求转发给服务器,再把服务器的响应转发给客户端,但是二者之间还是有一定的差异的。 1、正向代理其实是客户端的代理,帮助客户端访问其无法访问的......