来源

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

Pinia (发音为 /piːnjʌ/，类似英文中的 “peenya”) 是最接近有效包名 piña (西班牙语中的 pineapple，即“菠萝”) 的词

优点

Devtools 支持
追踪 actions、mutations 的时间线
在组件中展示它们所用到的 Store
让调试更容易的 Time travel

热更新
不必重载页面即可修改 Store
开发时可保持当前的 State
插件：可通过插件扩展 Pinia 功能
为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
支持服务端渲染

基本的使用

在store/counter.js中使用

import {ref} from 'vue'
export const useCounterStore = defineStore('counter', () => {const count = ref(0) //定义状态 countfunction increment() { // 定义改变状态的方法count.value++}
// 导出状态与方法return { count, increment }})

在main.js中引入

import { createPinia } from 'pinia'
app.use(createPinia())

在组件中使用

// 导入仓库
import { useCounterStore } from '@/stores/counter'
// 生成仓库
const counter = useCounterStore()
// 更新仓库
counter.count++
counter.increment()

用调用 $patch 方法更改state中数据

store.$patch({count: store.count + 1,age: 120,})store.$patch((state) => {state.items.push({ name: 'shoes', quantity: 1 })state.hasChanged = true
})

State-监听（存储到本地）

cartStore.$subscribe((mutation, state) => {// import { MutationType } from 'pinia'mutation.type // 'direct' | 'patch object' | 'patch function'// 和 cartStore.$id 一样mutation.storeId // 'cart'// 只有 mutation.type === 'patch object'的情况下才可用mutation.payload // 传递给 cartStore.$patch() 的补丁对象。// 每当状态发生变化时，将整个 state 持久化到本地存储。localStorage.setItem('cart', JSON.stringify(state))
}, { detached: true })watch(pinia.state,(state) => {// 每当状态发生变化时，将整个 state 持久化到本地存储。localStorage.setItem('piniaState', JSON.stringify(state))},{ deep: true }
)

计算

export const useCounterStore = defineStore('counter', () => {const count = ref(0)const doubleCount = computed(() => count.value * 2)return { count, doubleCount }
})

Pinia 详细教程相关推荐

手把手从零开始搭建k8s集群超详细教程
本教程根据B站课程云原生Java架构师的第一课K8s+Docker+KubeSphere+DevOps同步所做笔记教程 k8s集群搭建超详细教程 1. 基本环境搭建 1. 创建私有网络 2. 创建服务 ...
win10系统优化计算机,全面优化win10电脑系统详细教程 | 专业网吧维护
全面优化win10电脑系统详细教程以下针对win10系统的电脑全面优化的步骤: 步骤1:禁止开机启动项 1.首先我们先来优化开机速度,拖慢开机速度的首先是开机自启动项,Ctrl + Shift + ...
GPU运行Tensorflow详细教程及错误解决
GPU运行Tensorflow详细教程及错误解决前提条件配置GPU运行确认是否成功配置出现的错误及解决方案前提条件最重要的一点:CUDA与tensorflow的版本一点要对应,不然用不了! ...
VMware虚拟机安装黑苹果MacOS Mojave系统详细教程
更多资源请百度搜索:前端资源网欢迎关注我的博客:www.w3h5.com 最近遇到一个H5页面的 iPhone X 刘海兼容问题.查到一个 XCode 编辑器,可以模拟 iPhone X 环境运行. ...
[分享] 从定制Win7母盘到封装详细教程 By BILL （ 10月23日补充说明）
[分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...
win七系统如何卸载MySQL_win7系统卸载SQL2008R2数据库的详细教程
用过SQL2008R2数据库的朋友都知道,安装起来容易卸起来麻烦,可是在win7 32位旗舰版系统就不知道怎么卸载SQL2008R2数据库了.其实卸载SQL2008R2数据库的方法也很简单,可直接通过 ...
Ubuntu系统安装搜狗输入法详细教程
Ubuntu16.04系统安装搜狗输入法详细教程解决Ubuntu 18.04中文输入法的问题,安装搜狗拼音
PHP7Grafika,PHP图片处理库Grafika详细教程（3）：图像属性处理
该文章是接着上篇文章,<PHP极其强大的图片处理库Grafika详细教程(2):图像特效处理模块>,由于grafika功能太多,所以分开写,其他的点击这里该文章主要写grafika的图像 ...
mysql.msi卸载_MySql安装与卸载的详细教程
本文为大家分享了MySql安装与卸载的教程,供大家参考,具体内容如下一.MYSQL的安装 1.打开下载的mysql安装文件,双击运行mysql-5.5.40-win32.msi. 2.选择安装类型, ...

Pinia 详细教程

来源

优点

基本的使用

Pinia 详细教程相关推荐

最新文章

热门文章