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

悠悠 2024-05-24 04:37 53阅读 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 条评论，53人围观）

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

相关阅读

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

Pinia。

悠悠/ 2024年05月24日 04:37/ 0 赞/ 54 阅读

相关 Docker容器（二）安装与初体验wordpress

一、安装 1.1关闭SeLinux > SeLinux（Security-Enhanced Linux）是一种基于Linux内核的安全模块，旨在提供更严...

浅浅的花香味﹌/ 2024年04月17日 13:46/ 0 赞/ 74 阅读

相关 Redis介绍、安装与初体验

Redis 是什么 Redis（Remote Dictionary Server )，即远程字典服务，是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化

电玩女神/ 2024年04月07日 11:58/ 0 赞/ 74 阅读

相关【vue3】Pinia是什么？实现原理？手写Pinia!

前言： > 本文只是说明pinia的核心功能及核心原理，它本身的功能是很多很复杂的，这里就不进行叙述，我们只需要掌握这个工具的核心功能即可。 1.是什么 > Pi

矫情吗；*/ 2024年02月19日 11:34/ 0 赞/ 69 阅读

相关目标检测初体验（一）

很久没有写CV方面的文章了，最近笔者接触了一段时间的目标检测的工具：darknet，因此希望能写篇文章记录下，同时希望自己能在目标检测有更深一步的研究。目标检测是

绝地灬酷狼/ 2023年03月13日 05:56/ 0 赞/ 128 阅读

相关 webpack 手摸手学习系列之初体验

一、webpack 的介绍 1. `webpack` 是一种前端资源构建工具，一个静态模块打包器(`module bundler`)，前端的所有资源文件(`js/jso

﹏ヽ暗。殇╰゛Y/ 2023年02月12日 03:28/ 0 赞/ 33 阅读

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

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

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

相关 freemarker快速上手

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

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

相关 typescript 快速上手

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

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

相关 1、安装和初体验

Vue 安装和初体验一、下载引入二、实际操作三、案例 3.1、Hello World 3.2、列表的展示

水深无声/ 2021年09月24日 19:24/ 0 赞/ 380 阅读