首页 > 其他分享 >Pinia入门(快速上手)

Pinia入门(快速上手)

时间:2024-08-30 13:22:49浏览次数:15  
标签:const 入门 快速 setup Pinia doubleCount useStore store name

定义一个 Store 

在深入了解核心概念之前,我们需要知道 Store 是使用 defineStore() 定义的,并且它需要一个唯一名称,作为第一个参数传递:

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
  // other options...
})

这个 name,也称为 id,是必要的,Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use... 是跨可组合项的约定,以使其符合你的使用习惯。

使用 store 

我们正在 定义 一个 store,因为在 setup() 中调用 useStore() 之前不会创建 store:

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      // 您可以返回整个 store 实例以在模板中使用它
      store,
    }
  },
}

您可以根据需要定义任意数量的 store ,并且**您应该在不同的文件中定义每个 store **以充分利用 pinia(例如自动允许您的包进行代码拆分和 TypeScript 推理)。

如果您还没有使用 setup 组件,您仍然可以将 Pinia 与 map helpers 一起使用

一旦 store 被实例化,你就可以直接在 store 上访问 stategetters 和 actions 中定义的任何属性。 我们将在接下来的页面中详细介绍这些内容,但自动补全会对您有所帮助。

请注意,store 是一个用reactive 包裹的对象,这意味着不需要在getter 之后写.value,但是,就像setup 中的props 一样,我们不能对其进行解构

export default defineComponent({
  setup() {
    const store = useStore()
    // ❌ 这不起作用,因为它会破坏响应式
    // 这和从 props 解构是一样的
    const { name, doubleCount } = store

    name // "eduardo"
    doubleCount // 2

    return {
      // 一直会是 "eduardo"
      name,
      // 一直会是 2
      doubleCount,
      // 这将是响应式的
      doubleValue: computed(() => store.doubleCount),
      }
  },
})

为了从 Store 中提取属性同时保持其响应式,您需要使用storeToRefs()。 它将为任何响应式属性创建 refs。 当您仅使用 store 中的状态但不调用任何操作时,这很有用:

import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()
    // `name` 和 `doubleCount` 是响应式引用
    // 这也会为插件添加的属性创建引用
    // 但跳过任何 action 或 非响应式(不是 ref/reactive)的属性
    const { name, doubleCount } = storeToRefs(store)

    return {
      name,
      doubleCount
    }
  },
})

标签:const,入门,快速,setup,Pinia,doubleCount,useStore,store,name
From: https://blog.csdn.net/weixin_73060959/article/details/141639101

相关文章

  • HTTP协议入门
    HTTP协议入门参考:http://www.ruanyifeng.com/blog/2016/08/http.html      一、HTTP/0.9HTTP是基于TCP/IP协议的应用层协议。它不涉及数据包传输,主要规定了客户端和服务器之间的通信格式,默认使用80端口。最早版本是1991年发布的0.9版。该版本及其简单,只有一个命......
  • Python编程实战营:四款实用小项目助你快速入门,从零开始打造你的个人项目集!
    踏入编程世界的门槛,总是伴随着既兴奋又忐忑的心情。作为Python的新手,你是否渴望通过实际项目来巩固知识、提升技能?本篇文章将引领你踏上一段从理论到实践的精彩旅程,通过四个精心设计的项目,让你在趣味与挑战中快速成长。项目一:简易文本编辑器首先,我们将从基础出发,动手打造一......
  • 如何使用cURL发送POST请求?快速搞定网络请求
    大家好,小编又来分享干货啦!今天我们要聊聊网络开发中常见的一个操作——如何使用cURL发送POST请求。带你快速掌握发送POST请求的技巧,并且还会揭秘如何通过代理IP进一步优化你的网络请求。1.cURL是什么?简单来说,cURL是一个用于向服务器传递数据的命令行工具,它支持多种协议,最常用的就......
  • LLaMA-Factory微调入门个人重制版
    LLaMA-Factory微调入门个人重制版说明:首次发表日期:2024-08-30LLaMA-Factory官方Github仓库:https://github.com/hiyouga/LLaMA-Factory关于本文是对LLaMA-Factory入门教程https://zhuanlan.zhihu.com/p/695287607的个人重制版,记录一下学习过程,省略掉了很多文字部分,建议......
  • vue3-pinia保持数据时效性,不会因为刷新浏览器丢失实时数据(pinia-plugin-persistedstat
    1.方法一(pinia-plugin-persistedstate)1.安装插件-pinia-plugin-persistedstateyarnaddpinia-plugin-persistedstatenpmipinia-plugin-persistedstate2.在pinia中注册import{createPinia}from'pinia';importpiniaPluginPersistedstatefrom'pinia-pl......
  • Pearson相关性分析 —— 入门案例
    简介Pearson相关系数Pearson相关系数是一种统计方法,用于衡量两个连续变量之间的线性相关程度。Pearson相关系数的值范围从-1到1,其中:接近1的值表示两个变量之间存在强正线性关系。接近-1的值表示两个变量之间存在强负线性关系。接近0的值表示两个变量之间没有线性关系。Pea......
  • 快速排序python实现
    defquick_sort(arr,left,right):origin_left=leftorigin_right=rightpivot_data=arr[left]#枢轴上的值(基准值),就是开始用来比较的值,一般是随机选择一个位置,这儿选择最左边的值#blank_pos=left#最左边的值已经复制到pivot中了,所以这块......
  • Datawhale X 李宏毅苹果书(入门) AI夏令营 task02笔记
    官方学习文档:https://linklearner.com/activity/16/14/55往期task01链接:https://mp.csdn.net/mp_blog/creation/editor/141535616李宏毅老师对应视频课程可供食用:https://www.bilibili.com/video/BV1JA411c7VT/?p=3机器学习基础线性模型        w跟b的值上期ta......
  • Datawhale X 李宏毅苹果书(入门) AI夏令营 task01笔记
    官方学习链接:https://linklearner.com/activity/16/14/42机器学习基础导读        通俗来讲,机器学习就是让机器具备找一个函数的能力。这里指的“找一个函数”,指的是找一个能够描述一个场景数学规律的函数模型,具体方法大致是:让机器运行算法,通过输入的数据,确定合适的......
  • 区块链入门
    1.1区块链技术的发展        随着2008年比特币(Bitcoin)的发明,一个被称为区块链(Blockchain)的新概念进入了人们的视野,这项新技术据信有可能彻底改变整个社会。        区块链有望对每个行业产生颠覆的影响,包括但不限于IT、金融、政府、媒体、医疗、法律......