首页 前端知识 还有人没尝过 Pinia 吗,请收下这份食用指南!

还有人没尝过 Pinia 吗,请收下这份食用指南!

2024-07-10 22:07:39 前端知识 前端哥 128 254 我要收藏

前言

Pinia ,发音为 /piːnjʌ/,来源于西班牙语 piña 。意思为菠萝,表示与菠萝一样,由很多小块组成。在 Pinia 中,每个 Store 都是单独存在,一同进行状态管理。

Pinia 是由 Vue.js 团队成员开发,最初是为了探索 Vuex 下一次迭代会是什么样子。过程中,Pinia 实现了 Vuex5 提案的大部分内容,于是就取而代之了。

与 Vuex 相比,Pinia 提供了更简单的 API,更少的规范,以及 Composition-API 风格的 API 。更重要的是,与 TypeScript 一起使用具有可靠的类型推断支持。

Pinia 与 Vuex 3.x/4.x 的不同

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

既然 Pinia 这么香,那么还等什么,一起用起来吧!

基本用法

安装

npm install pinia

在 main.js 中 引入 Pinia

// src/main.js
import {
    createPinia } from 'pinia'

const pinia = createPinia()
app.use(pinia)

定义一个 Store

src/stores 目录下创建 counter.js 文件,使用 defineStore() 定义一个 Store 。defineStore() 第一个参数是 storeId ,第二个参数是一个选项对象:

// src/stores/counter.js
import {
    defineStore } from 'pinia'

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

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

// src/stores/counter.js
import {
    ref, computed } from 'vue'
import {
    defineStore } from 'pinia'

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

  return {
    count, doubleCount, increment }
})

在组件中使用

在组件中导入刚才定义的函数,并执行一下这个函数,就可以获取到 store 了:

<script setup>
import {
      useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
// 以下三种方式都会被 devtools 跟踪
counterStore.count  
counterStore.$patch({
      count: counterStore.count   1 })
counterStore.increment()
</script>

<template>
  <div>{
  { counterStore.count }}</div>
  <div>{
  { counterStore.doubleCount }}</div>
</template>

这就是基本用法,下面我们来介绍一下每个选项的功能,及插件的使用方法。

State

解构 store

store 是一个用 reactive 包裹的对象,如果直接解构会失去响应性。我们可以使用 storeToRefs() 对其进行解构:

<script setup>
import {
      storeToRefs } from 'pinia'
import {
      useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
const {
      count
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13940.html
标签
评论
发布的文章

jQuery-w3school(2020

2024-08-04 23:08:08

jQuery常用方法总结

2024-08-04 23:08:34

Vue2使用echarts树图(tree)

2024-08-04 23:08:29

图表库-Echarts

2024-08-04 23:08:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!