Pinia 的 Setup Stores 语法使用实例详解

目录
  • 关于大菠萝
  • 最常见的 Option Stores 语法
  • 安利 Setup Stores 语法
  • 如果在 Vue3 的 Setup 语法外使用 Pinia 呢？

关于大菠萝

如果你还不了解 Pinia，那你可以将它理解为 Vuex5（因为 Vuex 5 不会出了），是 Vue3 全家桶成员之一。

这里是它的英文官方文档，中文文档好像不是官方的，并且当前翻译的不全面（比如 Setup Stores 就没有在中文文档中出现），不是很推荐。

最常见的 Option Stores 语法

传递带有 state、getters 和 actions 属性的 Options 对象给 defineStore() 就可以定义一个 Store：

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
 }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

这种语法与 Vuex 中定义 Store 的语法非常近似，但是少了 Mutation 字段。

不仅如此，这种写法也和 Vue2 的 Options API（选项式 API）结构类似：state 与 data 对应、getters 与 computed 对应、actions 与 methods 对应。

这种写法的好处就是结构非常清晰，容易上手，特别是对刚从 Vue2 和 Vuex 转到 Pinia 的开发者！

安利 Setup Stores 语法

但 Setup Stores 语法更灵活、更函数：

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

在这种语法中，ref 与 state 对应、computed 与 getters 对应、function 与 actions 对应。

想必写过 Vue3 朋友就能一眼看出来这和 Vue3 新推出的 Composition API（组合式 API）非常类似！这样的话，在使用 Vue3 和 Pinia 的时候，就能统一语法了。

如果在 Vue3 的 Setup 语法外使用 Pinia 呢？

如果你准备在 Vue3 的 Setup 语法外引入 Pinia 的 Store，例如 useCounterStore。

直接 import { useCounterStore } from "@/store/modules/xxxxxx" 是不行的，你得像这样：

import store from "@/store"
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
})
/** 在 setup 外使用 */
export function useCounterStoreHook() {
  return useCounterStore(store)
}

然后引入 import { useCounterStoreHook } from "@/store/modules/xxxxxx" 即可！

集成好 Pinia 的模板

最后自荐一下这个轻量级 Vue3 后台管理模板，集成好了 Pinia 并且语法正是 Setup Stores！

GitHub: v3-admin-vite

Gitee: v3-admin-vite

以上就是Pinia 的 Setup Stores 语法使用实例详解的详细内容，更多关于Pinia Setup Stores 语法的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue3-pinia-ts项目中的使用示例详解

     store.ts import { defineStore } from "pinia"; import { GlobalState, ThemeConfigProp } from "./interface"; import { createPinia } from "pinia"; import piniaPersistConfig from "@/config/piniaPersist"; import piniaPlu

  • vue中使用 pinia 全局状态管理的实现

    vue中使用 pinia 全局状态管理的实现

    目录 与vuex的区别 安装 引入pinia 创建状态目录 pinia模块组成 创建pinia模块 在组件中使用该状态机 pinia模块实例中的api讲解 状态持久化 与vuex的区别 去除了 mutation 选项.省去了复杂的disptach和commit流程,直接通过模块实例调用实例的actions中的方法即可触发对应action:在组件中直接可以通过模块实例的$patch修改store状态或者通过action来间接修改store状态.响应式数据原理是proxy,使得数据的增加或者删除字段

  • vue3+pinia的快速入门使用教程

    目录 1. pinia介绍 2. 安装 3. 使用 1. src文件夹下新建store/index.js 2. main.ts引入 3.store下新建js文件,比如userInfo.js 4. 页面使用 补充:存储状态并持久化存储 总结 1. pinia介绍 官网关于pinia的介绍 Pinia 是一个状态管理库,由 Vue 核心团队维护,对 Vue 2 和 Vue 3 都可用. 现有用户可能对 Vuex 更熟悉,它是 Vue 之前的官方状态管理库.由于 Pinia 在生态系统中能够承担相同的

  • TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    目录 简介 安装 创建pinia并传递给vue实例 创建store state getters actions 在vue组件使用 获取state 获取getters 修改state 数据持久化 总结 简介 今天我们再来实战下官方推荐的新的vue状态管理工具Pinia. pinia 由 vue 团队中成员所开发的,因此也被认为是下一代的 vuex,即 vuex5.x,在 vue3 的项目中使用也是备受推崇.所以 pinia 的学习迫在眉睫. 下面我们正式开始pinia的学习吧. 安装 yarn a

  • Vue新一代状态管理工具Pinia的具体使用

    Vue新一代状态管理工具Pinia的具体使用

    目录 前言 优点 安装 创建并挂载 创建store 使用store 回显与修改state 使用$patch对多条数据直接修改 使用actions 使用getters 多个store相互调用 数据持久化 安装 使用 总结 前言 Pinia是尤雨溪强烈推荐的一款Vue状态管理工具,也被认为是下一代Vuex的替代产品. 优点 去除了mutations,只有 state,getters和actions,其中actions支持了同步和异步操作 不会像Vuex那样有模块嵌套,Pinia只有store的概念,

  • 详解Vue3-pinia状态管理

    目录 pinia是什么? 官网 安装命令 使用 pinia是什么? 这个是 vue3 新的状态管理工具,简单来说相当于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,尤大推荐.因为其logo像是一个菠萝,所以我们还称呼它为大菠萝. 这个是 vue3 新的状态管理工具,简单来说相当于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,尤大推荐.因为其logo像是一个菠萝,所以我们还称呼它为大菠萝. 官网 https://pinia.vuejs.org

  • Pinia 的 Setup Stores 语法使用实例详解

    目录 关于大菠萝 最常见的 Option Stores 语法 安利 Setup Stores 语法 如果在 Vue3 的 Setup 语法外使用 Pinia 呢? 关于大菠萝 如果你还不了解 Pinia,那你可以将它理解为 Vuex5(因为 Vuex 5 不会出了),是 Vue3 全家桶成员之一. 这里是它的英文官方文档,中文文档好像不是官方的,并且当前翻译的不全面(比如 Setup Stores 就没有在中文文档中出现),不是很推荐. 最常见的 Option Stores 语法 传递带有 st

  • vue3更新的setup语法糖实例详解

    目录 前言 语法糖用法: 语法糖带来的体验 一.组件自动注册 二.属性及方法无需return 三.自动将文件名定义为组件的name属性 1.defineProps 2.defineEmits 3.defineExpose 总结 前言 vue3最近更新了一个setup语法糖,这两天才看到,使用起来雀食很甜,特发个帖子记录下 语法糖用法: // 将 `setup` attribute 添加到 `<script>` 代码块上 // 里面的代码会被编译成组件 `setup()` 函数的内容 // 就是

  • Mysql 5.7.9 shutdown 语法实例详解

    mysql-5.7.9 终于提供shutdown 语法啦: 之前如果想关闭一个mysql数据库可以通过kill 命令.mysqladmin shutdown .service mysqld stop 等这样的方式. 然而在mysql-5.7.9之后mysql终于提供了SQL接口的shutdown语法啦! SQL接口下的shutdown语法: 语法 shutdown ; -- 这个shutdown要执行成功要有shutdown权限才行. shutdown的一个例子: [root@workstudi

  • Kotlin 基础语法实例详解

    Kotlin 基础语法实例详解 包 定义和引入Java一样,在文件开头, 行结束不需要" ; " package com.test.hello import android.os.Bundle 变量 只读变量,val 开头,初始化后不能再赋值,相当于Java的 final 变量 val a: Int = 1 val b = 1 //类型自动推断为Int val c: Int //没有初始化时必须指定类型 c = 1 //初始化 可变变量, var 关键字开头 var x = 10 x

  • C#语法新特性之元组实例详解

    1.元组(Tuple) 元组(Tuple)在4.0 的时候就有了,但元组也有些缺点,如: 1)Tuple 会影响代码的可读性,因为它的属性名都是:Item1,Item2.. . 2)Tuple 还不够轻量级,因为它是引用类型(Class),对于一个变量要使用一个类型,有点太没必要了. 源代码如下: // 摘要: // 提供用于创造元组对象的静态方法.若要浏览此类型的.NET Framework 源代码,请参阅 Reference Source. public static class Tuple

  • PHP 7.4 新语法之箭头函数实例详解

    短闭包,也叫做箭头函数,是一种用 php 编写的短函数.当向函数中传递闭包时,这个功能是非常有用的,比如使用 array_map 或是 array_filter函数时. 这就是它们看起来的样子: // Post 对象的集合 $posts = [/* - */]; $ids = array_map(fn($post) => $post->id, $posts); 而以前,你必须这样写: $ids = array_map(function ($post) { return $post->id

  • Go语法糖之‘...’ 的使用实例详解

    语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用.通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会. 下面通过例子看下Go语法糖之'...' 的使用,具体内容如下所示: '-' 其实是go的一种语法糖. 它的第一个用法主要是用于函数有多个不定参数的情况,可以接受多个不确定数量的参数. 第二个用法是sli

  • Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

    Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项

  • 为Vue3 组件标注 TS 类型实例详解

    目录 为 props 标注类型 使用 <script setup> 非 <script setup> 为 emits 标注类型 使用 <script setup> 非 <script setup> 为 ref() 标注类型 默认推导类型 通过接口指定类型 通过泛型指定类型 为 reactive() 标注类型 默认推导类型 通过接口指定类型 为 computed() 标注类型 默认推导类型 通过泛型指定类型 为事件处理函数标注类型 为 provide / in

  • Vue3组件挂载之创建组件实例详解

    目录 前情提要 mountComponent 创建组件实例 总结 前情提要 上文我们讲解了执行createApp(App).mount('#root')中的mount函数,我们分析了创建虚拟节点的几个方法,以及setRef的执行机制.本文我们继续讲解mountComponent,挂载组件的流程. 本文主要内容 createComponentInstance发生了什么? 如何标准化组件定义的props.emits? 为什么provide提供的值子组件都能访问到? 组件的v-model实现原理.组件

随机推荐