Pinia的写法探索

在最新的 Vue 官方文档中，核心库的地址已经指向了Pinia，这表明已经把 Pinia 当做 Vue3.x 的官方状态管理库了。下面来探索下 Pinia 的使用方式。

基础

在 Pinia 的首页文档上介绍了最基础的使用方式：

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},// could also be defined as// state: () => ({ count: 0 })actions: {increment() {this.count++},},
})

注意上图的代码，里面用了this.count++ 在我第一次看到的时候，就觉得不舒服，因为整个项目已经是 Composition 的写法了，已经不再使用this了，不明白官方的推荐写法为什么是这样的。

所以我去提了个 issue：use state instead of this in actions

作者回复了：

There are two reasons actions do not take any parameters by default:- Allow the user to define any parameters as they want
- Type support: passing the state wouldn't be enough in actions, we would need to pass the store but then actions wouldn't be automatically typed because of a limitation in TSThis is not stated in docs because it's an implementation detail and would confuse most users.

解决方案

看完之后我感觉并没有说清楚，后来自己又在文档首页发现了下面这样的写法：

export const useCounterStore = defineStore('counter', () => {const count = ref(0)function increment() {count.value++}return { count, increment }
})

感觉还不错，使用最新的 Vue.js devtools 调试，发现这种也会有一个 state ，调用方法的时候也会有 pinia 的 action 记录产生，调试没问题

Pinia的写法探索相关推荐

vue3使用vite+setup+ts写一个初级前端项目
Vue3vite+setup+ts项目总结项目说明项目概述本项目纯粹是为了学习和巩固刚学的vue3组合式api和语法糖,再加上网上流行vite+ts+vue,所以便有了这个历时四天的vue3前端 ...
oracle 事务写法,【原创】 Oracle 事务探索与实例(一)
更多精彩内容尽在 <Oracle事务探索与实例> 一数据库版本 SYS@LEO1>select* from v$version; BANNER ------------------- ...
Calabash探索3-Calabash进阶
2017-3-17 | 暴打小女孩| 测试前言上一篇我们讲了Calabash的基本用法,有了上一篇的经验,已经可以写基本的测试脚本了,只不过一些特殊情况会写的不那么方便,这一篇我们讲一些Calab ...
Linux 探索之旅 | 第三部分第五课：延时执行，唯慢不破
-- 作者谢恩铭转载请注明出处内容简介第三部分第五课:延时执行,唯慢不破第三部分第六课预告:第三部分测验题延时执行,唯慢不破上一课 Linux探索之旅 | 第三部分第四课:后台运行及合并 ...
一套代码小程序WebNative运行的探索01
前言前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉并且用小程序翻写了之前一个demo:[组件化开发]前端进阶篇之如何编写可维护可升级的代码之前一直在跟业务方打交道 ...
探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
前言首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...
探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用23
前言首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其 ...
Flex布局新写法兼容写法详解
很久之前用过flex,但是没有考虑过兼容性问题,为了兼容ios一定要加上-webkit前缀: ul{display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ * ...
Retrofit2 完全解析探索与okhttp之间的关系
http://blog.csdn.net/lmj623565791/article/details/51304204: 本文出自:[张鸿洋的博客] 1. 概述之前写了个okhttputils的工具类 ...
不同浏览器 ajax,完整的 AJAX 写法(支持多浏览器)
代码如下: var xmlhttp; function Submit() { //1.创建 XMLHttpRequest 对象 if (window.XMLHttpRequest) { //IE7,I ...

Pinia的写法探索

基础

解决方案

Pinia的写法探索相关推荐

最新文章

热门文章