vue グローバル状態管理ツールである Pinia の使用

まずはピニアについてのエピソードをいくつか聞かせてください。それを面接で面接官に伝えるとプラスになり、学び続けるモチベーションになります。

1. なぜピニアと呼ばれるのでしょうか?

公式サイトの説明ではパイナップルとはスペイン語で「パイナップル」を意味しており、パイナップルの花は独立した花が集まって複数の果実を形成します。Store と同様に、それぞれが独立して生まれ、最終的にはすべて相互に関連します。それ（パイナップル）も南米原産のおいしいトロピカルフルーツです。

2. ピニアの機能は何ですか?

vuex と同じ機能で、データをグローバルに共有するために使用されます。実際、Pinia は、2019 年 11 月頃に Pinia によって実施された実験である vuex のアップデートに由来しています。その目的は、API を組み合わせた vue 状態管理ライブラリを設計することでした。これは、vue3 コードを vuex で記述できることを意味します。vuex 5 のほとんどの機能を組み合わせて、vuex を新しい推奨ソリューションとして置き換えることが決定されました。つまり、Pinia は vuex5 バージョンです。

3. インストールし、プロジェクトのターミナルに次のように入力します。

npm install pinia

4. main.jsの設定

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

5.stores 倉庫、倉庫の管理操作を保存する src ディレクトリに Stores フォルダーを作成します。

6. counter.js ウェアハウス。私が実装した関数は数値を追加することなので、カウンターという名前を付けました。

//这里就使用vue3的写法，虽然pinia也可以像写vuex一样写state、actions、mutations等等，但pinia主要还是面向vue3

import { defineStore } from 'pinia' //引入
import { ref, reactive } from "vue" //引入组合式api
import { useRouter } from "vue-router"

//可以对 `defineStore()` 的返回值进行任意命名，但最好使用 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
//defineStore()的第一个参数一定要是项目中唯一的名称
export const useCounter = defineStore('counter', () => {
    let num = ref(0) //这个num就是此仓库中的响应式数据

    const addNum = () =>{ //addNum就是此仓库的方法
        num.value = num.value+1;
    }

    return { num,addNum } //一定要return！不然其他地方用不到
})

7. 概要ページでカウンターウェアハウスを使用します。

<script setup>
import {useCounter} from "@/stores/counter.js" //引入useCounter仓库
//接收return的返回值，里面就包含num变量和addNum方法，num展示到页面，点击按钮调用addNum方法
const store = useCounter();    
</script>

<template>
  <div class="about">
    <h1>{
   
   {store.num}}</h1>
    <button @click="store.addNum">num++</button>
  </div>
</template>

<style>
</style>

8. 効果: ボタンをクリックすると、ページ上の番号がそれに応じて変化し、成功します。

確かに Pinia は vuex よりもはるかに便利で、アクションやミューテーションによる制限がなく、ウェアハウス内のデータを直接読み書きできるので、Pinia と Vuex の関係は Vue3 と Vue2 の関係に似ていると感じています。

Pinia官网：Pinia | The intuitive store for Vue.js

vue グローバル状態管理ツールである Pinia の使用

おすすめ