Pinia 快速入门

Pinia 是什么?

Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案 Pinia 支持 Vue2 和 Vue3

常见问题

关于该项目和可能问题的几点说明:

问:这是否取代了Vuex,是它的继任者吗?

答:不,或者至少这不是主要意图

问:动态模块呢?

答:动态模块不是安全的类型,因此我们允许创建不同的商店,可以在任何地方导入

Pinia 优势

符合直觉,易于学习 极轻, 仅有 1 KB 模块化设计,便于拆分状态

安装 Pinia

yarn add pinia@next
# or with npm
npm install pinia@next

用法

创建一个 pinia(根存储)并将其传递给应用程序:

import { createPinia } from 'pinia';

app.use(createPinia());

核心概念与基本使用

Store Store 是一个保存状态和业务逻辑的实体,可以自由读取和写入,并通过导入后在 setup 中使用 创建一个 store

// store.js
import { defineStore } from "pinia";
interface MainState {
  counter: number
  name: string
}
export const useMainStore = defineStore({
  // id: 必须的,在所有 Store 中唯一
  id: "main",
  // a function that returns a fresh state
  state: () => MainState ({
    counter: 0,
    name: 'Eduardo',
  }),
  // optional getters
  getters: {
    doubleCount() {
      return this.counter * 2
    },
    // use getters in other getters
    doubleCountPlusOne() {
      return this.doubleCount * 2 + 1
    },
  },
  // optional actions
  actions: {
    reset() {
      // `this` is the store instance
      this.counter = 0
    },
  },
})

使用 Store

// xxx.vue
<template>
  <div>
    {{store.count}}
  </div>
</template>
<script>
// 导入 Store, 使用自己的路径
import { useMainStore } from '@/stores/main'

export default defineComponent({
  setup() {
    // 调用函数 获得Store
    const store = useMainStore()

    return {
      // gives access to the whole store
      store,
      // gives access only to specific state
      state: computed(() => store.counter),
      // gives access to specific getter; like `computed` properties
      doubleCount: computed(() => store.doubleCount),
    }
  },
})
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flask快速入门 flask快速入门

    zhang_derek
  • [大数据之Spark]——快速入门

    本篇文档是介绍如何快速使用spark,首先将会介绍下spark在shell中的交互api,然后展示下如何使用java,scala,python等语言编写应用。...

    用户1154259
  • SQL快速入门 ( MySQL快速入门, MySQL参考, MySQL快速回顾 )

    先说点废话,很久没发文了,整理了下自己当时入门 SQL 的笔记,无论用于入门,回顾,参考查询,应该都是有一定价值的,可以按照目录各取所需。SQL数据库有很多,M...

    马哥Python
  • Kylin快速入门系列(2) | Kylin的快速入门

    不温卜火
  • 快速学习-easyExcel快速入门

    Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程度...

    cwl_java
  • 快速学习-Mycat快速入门

    MyCAT 是使用 JAVA 语言进行编写开发,使用前需要先安装 JAVA 运行环境(JRE),由于 MyCAT 中使用了JDK7 中的一些特性,所以要求必须在...

    cwl_java
  • 快速学习-Scala快速入门

    IDEA 全称IntelliJ IDEA,是用于java语言开发的集成环境(也可用于其他语言),IntelliJ在业界被公认为最好的java开发工 具之一。I...

    cwl_java
  • 快速学习-Flume快速入门

    cwl_java
  • 快速学习ReactJS-快速入门

    JSX语法就是,可以在js文件中插入html片段,是React自创的一种语法。JSX语法会被Babel等转码工具进行转码,得到正常的js代码再执行。 使用JS...

    cwl_java
  • 快速学习-Thymeleaf快速入门

    以前大家用的比较多的是Freemarker,但是我们今天的主角是Thymeleaf!

    cwl_java
  • 快速学习-RabbitMQ快速入门

    RabbitMQ由Erlang语言开发,Erlang语言用于并发及分布式系统的开发,在电信领域应用广泛,OTP(Open Telecom Platform)作为...

    cwl_java
  • Threejs 快速入门

    在什么都是3D,看电影3D,打游戏3D,估计3D打车,很快就会面世。那么作为前端开发的标准语言,JS和3D能不能也搞出点大新闻呢?刚好最近在做一个活动时,就遇到...

    周明礼
  • SVG 快速入门

    SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。

    腾讯IVWEB团队
  • PhantomJS快速入门

    本文简要介绍了PhantomJS的相关基础知识点,主要包括PhantomJS的介绍、下载与安装、HelloWorld程序、核心模块介绍等。由于鄙人才疏学浅,难免...

    流柯
  • GreenDAO快速入门

    之前在自己做项目的时候,用到了GreenDAO数据库,其实对于数据库辅助工具库从OrmLite,到litePal再到GreenDAO,总是在不停的切换,但是没有...

    g小志
  • MongoDB【快速入门】

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是可以应用于各种规模的企业、各个行业以及各类应用程序的开源数据库。作为一个适用于敏捷开...

    我没有三颗心脏
  • ckplayer快速入门

    如果你在为你的在线视频(直播)网站找一个合适的网页播放器,那么ckplayer是你最好的选择之一。

    DencyCheng
  • 快速入门React

    使用react需要导入两个模块,react模块中提供了一些供模板使用的方法,react-dom提供了渲染DOM的方法

    Qiang
  • Redis快速入门

    Redis是一个开源,先进的key-value存储,并用于构建高性能,可扩展的Web应用程序的完美解决方案。 Redis从它的许多竞争继承来的三个主要特点: ...

    庞小明

扫码关注云+社区

领取腾讯云代金券