Vue3 はしばらくリリースされており、新しい Responsive を採用しています。システムを構築し、新しい Composition API を構築しました。 Vue を取り巻くエコシステムはこの新しいシステムに適応する取り組みを強化しており、公式の状態管理ライブラリである Vuex も適応しており、このため、公式は Vuex 5 の新しい提案を提出しました。 [関連する推奨事項: 「vue.js チュートリアル 」]
- は、ストアを作成するための 2 つの構文をサポートしています:
Options ApiおよびComposition Api; -
mutationsを削除し、state、getter、actionsのみをサポートします; - モジュラー設計はコード分割を十分にサポートできます;
- ネストされたモジュールはなく、ストアの概念のみ;
- Complete
TypeScriptサポート;
この提案の下に、興味深いコメントがあります。簡単な翻訳:
なんという偶然でしょう。Vuex5 の提案は、Ponia によって実装された機能とまったく関係がないとは言えません。まさにそのとおりであるとしか言えません。今日の記事では、このパイナップルを紹介させていただきます。
インストール
既存のプロジェクトでは、次のコマンドを使用して Ponia モジュールをインストールします。
# yarn yarn add pinia@next # npm npm i pinia@next
インストールが完了したら、Vue3 プロジェクトのエントリ ファイルにインポートしてインストールする必要があります。
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 实例化 Vue
const app = createApp(App)
// 安装 Pinia
app.use(createPinia())
// 挂载在真实 DOM
app.mount('#app')
はじめに
Ponia を使用するには、ストアを定義し、データが使用される場所にインポートするだけです。
Define Store
import { defineStore } from "pinia"
// 对外部暴露一个 use 方法，该方法会导出我们定义的 state
const useCounterStore = defineStore({
// 每个 store 的 id 必须唯一
id: 'counter',
// state 表示数据源
state: () => ({
count: 0
}),
// getters 类似于 computed，可对 state 的值进行二次计算
getters: {
double () {
// getter 中的 this 指向 state
return this.count * 2
},
// 如果使用箭头函数会导致 this 指向有问题
// 可以在函数的第一个参数中拿到 state
double: (state) => {
return state.count * 2
}
},
// actions 用来修改 state
actions: {
increment() {
// action 中的 this 指向 state
this.count++
},
}
})
export default useCounterStore
上記の vuex のようなメソッドを使用して状態を構築することに加えて、function フォームを使用して状態を作成することもできます。ストア (Vue3 の setup()) に似ています。
import { ref, computed } from "vue"
import { defineStore } from "pinia"
// 对外部暴露一个 use 方法，该方法会导出我们定义的 state
const useCounterStore = defineStore('counter', function () {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
return {
count, double, increment
}
})
export default useCounterStore
ストアの使用
前述したように、Pinia はストアを使用する 2 つの方法、Options Api と Composition Api を提供します。中都はそれを完璧にサポートします。
Options Api
Options Api では、公式に提供されている mapActions と mapState# を直接使用できます。 ## メソッドでは、ステート、ゲッター、アクションをストアにエクスポートしますが、使い方は基本的に Vuex と同じで簡単に始めることができます。
import { mapActions, mapState } from 'pinia'
import { useCounterStore } from '../model/counter'
export default {
name: 'HelloWorld',
computed: {
...mapState(useCounterStore, ['count', 'double'])
},
methods: {
...mapActions(useCounterStore, ['increment'])
}
}
Composition Api
Composition Api、状態とゲッターの両方が computed メソッドを通じて変更をリッスンする必要があります。これは Options Api と同じであり、computed オブジェクトに配置する必要があります。また、Options Api で取得した状態値は直接変更することも可能ですが、もちろん後のメンテナンスを容易にするために状態値を操作するアクションを記述することをお勧めします。
// Composition Api
import { computed } from 'vue'
import { useCounterStore } from '../stores/counter'
export default {
name: 'HelloWorld',
setup() {
const counter = useCounterStore()
return {
// state 和 getter 都需要在使用 computed，这和 Options Api 一样
count: computed(() => counter.count),
double: computed(() => counter.double),
increment: () => { counter.count++ }, // 可以直接修改 state 的值
increment: counter.increment, // 可以引用 store 中定义的 action
}
}
}
型ヒント
Vuex では、TypeScript の型ヒントがあまり良くなく、型導出を実行すると、その状態しかわかりません。特にコードを作成するプロセスでは、コードのプロンプトは非常に分かりにくいものになります。
pinia.d.ts):
コード分割
モジュラーを使用しているためこの設計では、vuex のようなモジュールを介してすべてのモジュールを 1 つのストアにマウントするのではなく、すべてのストアを個別に導入できます。 現在、Vuex を通じてストアを作成しているとします。このストアの下には、ユーザー モジュール (User) と製品モジュール (Goods) という 2 つのモジュールがあります。現在のホームページがユーザー情報のみを使用している場合でも、ストア全体がホームページの js チャンクにパッケージ化されます。
pinia を使用する場合は、defineStore を使用して、完全に別個の 2 つのストアを定義します。2 つのページが導入されても、相互に影響を与えることはありません。最終的なパッケージ化中に、ホームページの js チャンクと製品ページの js チャンクがそれぞれ対応するストアにパッケージ化されます。
Pinia の紹介はここで終わります。Vue3 を使用して新しいプロジェクトを開発する場合は、何も考えずに Pinia を使用することをお勧めします。簡潔でサイズはわずか 1KB です。
プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！