Pinia（一）初体验快速安装与上手

悠悠 2024-05-24 04:37 7阅读 0赞

### `Pinia`(`/piːnjʌ/`) ###

#### 安装与快速上手(`Vue3@3.2.37+Vite@1.0.0`) ####

安装

npm install pinia@2.0.17

在 `main.js` 中引入和使用

import {
         createPinia } from 'pinia'
    
    const app = createApp(App);
    app.use(createPinia());

创建 `src/store/index.ts`

import {
         defineStore } from 'pinia';
    
    export const useCounterStore = defineStore('counter', {
        
      state: () => {
        
        return {
        
          count: 0,
        }
      },
      getters: {
        
        doubleCount: (state) => {
        
          return state.count * 2;
        }
      },
      actions: {
        
        increment(a: number) {
        
           this.count += a
        }
      }
    })

在组件使用

import {
         useCounterStore } from '../store/';
    import TestPiniaSon from './TestPiniaSon.vue'
    
    const store = useCounterStore();
    
    function countPlus() {
        
      store.increment(1);
    }

<div>
      <h2>{
       {store.count}}</h2>
      <button @click="countPlus">countPlus</button>
    </div>

![在这里插入图片描述][e24cf3d5f10f476a84577ee036bdc5d5.png_pic_center]

[e24cf3d5f10f476a84577ee036bdc5d5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/1118fd3f2c4c4cadab09e536b5da13a3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 Lombok 快速上手

Lombok 文章目录 Lombok 1. 作用 2. 安装 3. 使用 1. 作用 JavaBean中无需手

淡淡的烟草味﹌/ 2023年01月11日 15:28/ 0 赞/ 109 阅读

相关 SVN快速上手

SVN 文章目录 SVN 一、SVN简介二、SVN优势三、几个基本概念四、SVN下载和安装

快来打我*/ 2023年01月05日 01:23/ 0 赞/ 119 阅读

相关 Maven快速上手

Maven 文章目录 Maven 一、使用Maven的原因二、Maven介绍三、Maven的下载与安装

浅浅的花香味﹌/ 2022年12月23日 07:18/ 0 赞/ 164 阅读

相关 Docker 快速上手

1、执行命令安装： yum install docker ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

缺乏、安全感/ 2022年12月21日 03:18/ 0 赞/ 111 阅读

相关【latex】1 环境安装与快速上手

《latex 学习笔记》【latex】[1 环境安装与快速上手][1] 【latex】[2 使用Aurora与在word中编写伪代码][2 _Aurora_

左手的ㄟ右手/ 2022年10月30日 15:28/ 0 赞/ 112 阅读

相关 UIAutomator快速上手

UIAutomator快速上手一、环境准备： 1、win7 2、安装带有android sdk的eclipse，即adt-bundle。我用的这个

忘是亡心i/ 2022年07月14日 11:51/ 0 赞/ 275 阅读

相关 freemarker快速上手

FreeMarker是一个用Java语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或HTTP。它

╰半橙微兮°/ 2022年05月21日 11:29/ 0 赞/ 271 阅读

相关 Springboot快速上手

基于Springboot 2.0.0.RELEASE 版本 1. System Requirement 1. Java8 or higher 2. Spring Fr

分手后的思念是犯贱/ 2022年05月07日 23:38/ 0 赞/ 284 阅读

相关 markdown快速上手

> markdown真的是简洁高效，，5分钟，快速上手markdown！ -------------------- 首先，来安利一个软件[Typora][]，强大不需要理由

红太狼/ 2022年04月25日 05:10/ 0 赞/ 322 阅读

相关 typescript 快速上手

假如翻到了此文章，如果你写过类似java,c\等强类型面向对象语言，就可以阅读此文，迅速入手TS，否则就移步到此：[https://ts.xcatliu.com/introdu

比眉伴天荒/ 2022年03月18日 07:55/ 0 赞/ 295 阅读