Vue店としてVuexを取り替えるPinia

3799 ワード

vue career javascript webdev テキストリンク

プロ

両方のvue 2と3をサポートします

捨てるMutation , のみstate , getter and action , 状態管理の簡素化

ネストされていない構造は、

サポートスクリプト

より良いコード分割

プロジェクトを作成するvite :

npm init vite@latest

インストールピン

npm i pinia

エントリmain.ts ファイルは以下のようになります:

それから、あなたは店を作ることができます

使用する

複数のプロパティを使用する必要がある場合store , それを容易にするために、我々はPiniaのstoreToRefs

簡単なデータ変更を使用することができますstore.propertyName 直接

変更が多くのデータを含むならば、我々は使うことができます$patch , そのDOCで指示されるように、それは修正の速度を改善します$patch つのargsを受け付けます:

$パッチ+オブジェクト

$パッチ+関数

また、経由で変更することができますaction

追加chagneState メソッドstore.actions

呼び出しstore.methodName 直接

the getter 内部pinia とほぼ同じですvue getter ‘値をキャッシュすることができますので、値が変更されなくても、複数の呼び出しに対して

追加getter 方法

コンポーネント内部で使用する

内部getter また、使用することができますthis データを変更する

新しいストアファイルを作成しましょうsubstore.ts

で使用するindex.ts

さて、それはVueチームによってVuexを置き換えるために推奨されるデフォルトであり、あなたはすでに生産でそれを使用することができます.

この問題について(Vue店としてVuexを取り替えるPinia), 我々は、より多くの情報をここで見つけました https://dev.to/frontierdev/pinia-to-replace-vuex-as-vue-store-3im

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol