mpvue での vuex の構成とローカル ストレージへの永続化のグラフィック チュートリアル分析

亚连
リリース: 2018-05-30 10:40:53
オリジナル
3393 人が閲覧しました

この記事では主に、mpvue で vuex を構成し、それをローカル ストレージに永続化する詳細なチュートリアルを紹介します。 # vuex の構成は、mpvue には落とし穴があることを除いて、vue の場合と同じです。つまり、新規作成時にストアに直接渡すことができません。ビュー。この記事では、ステップバイステップで詳しく紹介しますので、必要な友人は参照してください

# vuex の設定は、mpvue には落とし穴があることを除いて、vue の場合と同じです。つまり、mpvue をストアに直接渡すことができません。新しいビュー。

手順:

1. 次の構造で src ディレクトリの下に新しいストア ディレクトリを作成します (公式推奨: vuex.vuejs.org/zh-cn/struc…)

2. main では、ストアを .js に導入し、それを Vue コンストラクターのプロトタイプにバインドして、各 .vue コンポーネントが this.$store を通じてストア オブジェクトにアクセスできるようにします。

3. 使用する準備ができました。 vuexが公式推奨している利用プラン(大規模アプリケーションにも対応可能)についてお話します。

まず、mutation-types.js でミューテーションの名前を定義します

なぜ最初に名前定数を定義する必要があるのですか? (下の写真は vuex ドキュメントから取得したものです)

次に、mutations.js に処理メソッドを記述します

次に、index.js で変数を定義します。

ok、それを以下のコンポーネント

ok。

# vuex のデータをローカルに永続化します (vuex-persistedstate を使用) (github.com/robinvdvleu… )

プラグインのインストール後にストアに導入します (構成は次のとおりです):

ok ( vuex では、データはリアルタイムでローカルに同期されています)。

(ヒント: アプレットに入るたびにremoveItemメソッドが実行されてデータが保存されないので、上の図のremoveItemの後の関数を空の関数として一時的に書いてください!!)

上記は私がまとめたものです。 今後、皆様のお役に立てれば幸いです。

関連記事:

vueの関数呼び出しシーケンスの紹介

vue2.0をベースにした動的コンポーネントとレンダリングの詳細解説

Vueのデータを動的に作成・削除する方法

以上がmpvue での vuex の構成とローカル ストレージへの永続化のグラフィック チュートリアル分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!