Pinia食用指南-基础

前言

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食用指南-进阶 将介绍每个选项的功能以及插件的使用方法。