前言
Pinia与Vuex的不同
基本用法
- 定义一个Store
- 在组件中使用

前言

Pinia ，发音为 /piːnjʌ/，来源于西班牙语 piña 。意思为菠萝，表示与菠萝一样，由很多小块组成。在 Pinia 中，每个 Store 都是单独存在，一同进行状态管理。与 Vuex 相比，Pinia 提供了更简单的 API，更少的规范，以及 Composition-API 风格的 API 。更重要的是，与 TypeScript 一起使用具有可靠的类型推断支持。

Pinia与Vuex的不同

actions 中支持同步和异步方法修改 state 状态。
与 TypeScript 一起使用具有可靠的类型推断支持。
不再有模块嵌套，只有 Store 的概念，Store 之间可以相互调用。
支持插件扩展，可以非常方便实现本地存储等功能。
更加轻量，压缩后体积只有 2kb 左右。
mutations 不复存在。只有 state 、getters 、actions。

基本用法

安装

npm install pinia

在main.ts中引入pinia

// src/main.ts
import { createPinia } from 'pinia'const pinia = createPinia()
app.use(pinia)

定义一个Store

在 src/stores 目录下创建 setting.js 文件，使用 defineStore() 定义一个 Store 。defineStore() 第一个参数是 Id ，第二个参数是一个选项对象：

// src/stores/setting.ts
import { defineStore } from 'pinia'export const useSettingStore = defineStore('setting', {state: () => ({ count: 0 }),getters: {doubleCount: (state) => state.count * 2},actions: {increment() {this.count++}}
})

我们也可以使用更高级的用法，第二个参数传一个函数来定义Store：

我们也可以使用更高级的方法，第二个参数传入一个函数来定义 Store ：
// src/stores/setting.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useSettingStore = defineStore('setting', () => {const count = ref(0)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return { count, doubleCount, increment }
})

在组件中使用

在组件中导入刚才定义的函数并且执行就可以得到store了。

<script setup>
import { useSettingStore } from '@/stores/setting'const settingStore = useSettingStore()
// 以下三种方式都会被 devtools 跟踪
settingStore.count++
settingStore.$patch({ count: counterStore.count + 1 })
settingStore.increment()
</script><template><div>{{ settingStore.count }}</div><div>{{ settingStore.doubleCount }}</div>
</template>

这就是pinia的基本用法，下一篇 Pinia食用指南-进阶将介绍每个选项的功能以及插件的使用方法。

Pinia食用指南-基础相关推荐

独家食用指南系列|Android端SQLCipher的攻与防新编
大家好,今天给大家的是本周技术拆解官的第二篇文章,主题依然是沿用上一篇文章的主题–Android端SQLite的"食用指南",上篇文章我们讲到了基本的SQLite的定义.使用方法以 ...
unity 3d网络游戏实战(全).pdf_“游戏开发入门指南——Unity+”的食用指南
虽然专栏的文章已在置顶中按内容分好类了([置顶]游戏开发入门指南专栏目录),但不排除仍然有初学者面对繁杂的内容感觉无从下手.因此额外带来一篇食用指南,旨在给想要通过本专栏学习游戏开发的同学一条相对容易 ...
独家食用指南系列|Android端SQLite的浅尝辄止
大家好,本周技术拆解官的第一篇文章,给大家带来的是我们的新主题<独家食用指南系列>.作为新主题的第一篇系列文章,这次给大家分享下Android端SQLite的"食用指南" ...
Auto.js食用指南
Auto.js食用指南控件点击是autojs特有的一项功能,基于安卓的无障碍功能的,在软件上有很好的支持,常用于办公软件等- 前言: 软件选择: auto.js 8.0pro版本(对比4.0版本有阉 ...
“游戏开发入门指南——Unity+”的食用指南
"游戏开发入门指南--Unity+"的食用指南虽然专栏的文章已在置顶中按内容分好类了([置顶]游戏开发入门指南专栏目录),但不排除仍然有初学者面对繁杂的内容感觉无从下手.因此额外 ...
飞链云版图安全食用指南【AI绘画完整教程】简单易懂，方便易学
原文地址:https://feilianyun.yuque.com/bu08xt/dhf6ea/xo2ohusto8db1xga?singleDoc# <飞链云版图安全食用指南> 非常感谢 ...
H5活动产品设计指南基础版
本文来自网易云社区 . H5一般页面不会很多,看似简单,实际上会有很多细节需要注意,我自己在做过了几个H5之后,发现了一些常犯的问题,做了小结,希望给新开始做H5的产品相关的同学提供一些帮助. 首先 ...
Android一站式框架整合——Rui使用详细指南(基础篇)
Rui使用详细指南--基础版基础效果: GitHub地址 :Rui 视频地址 : Rui谷歌Mvp+Dagger2版 (进阶版):Rui使用详细指南(进阶版) 内容包括: 1.基于Rui快速搭建自己 ...
ClearCase指南-基础篇（连载一）
ClearCase指南-基础篇(连载一) 第1章前言 . 本文档凡斜体字即代表高级内容.高级概念.或可选内容,仅作粗略了解用,暂不必深入理会. . 如下如无特别说明,缩写"CC& ...

Pinia食用指南-基础

前言

Pinia与Vuex的不同

基本用法

定义一个Store

在组件中使用

Pinia食用指南-基础相关推荐

最新文章

热门文章