vue でのストアの使用法は何ですか?

Vue では、ストアは状態の管理、データの共有、およびさまざまなコンポーネント間の外部状態の管理に使用されます。ストアは Vuex アプリケーションのコアであり、ほとんどの状態と変更が含まれるコンテナーですストア内で状態を維持する唯一の方法は、ミューテーションを送信することです。

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue でのストアの使用法とは何ですか

Vuex は、Vue.js アプリケーション用に特別に開発された状態管理モデルです。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態が予測可能な方法で変化することを保証します。

すべての Vuex アプリケーションの中核はストア (倉庫) です。 「ストア」は基本的に、アプリケーション内のほとんどの状態を含むコンテナーです。 Vuex は、次の 2 つの点で単純なグローバル オブジェクトとは異なります。

Vuex の状態ストレージは応答性があります。 Vue コンポーネントがストアから状態を読み取るときに、ストア内の状態が変化すると、それに応じて対応するコンポーネントが効率的に更新されます。

ストア内の状態を直接変更することはできません。ストア内の状態を変更する唯一の方法は、ミューテーションを明示的にコミットすることです。これにより、あらゆる状態変化を簡単に追跡できるようになり、アプリケーションをより深く理解するのに役立ついくつかのツールを実装できるようになります。

store

state の中心的な概念は、vue インスタンスのデータ属性と同様に、ストア内の状態を表します。

Mutation

Vuex ストアの状態を変更する唯一の方法は、ミューテーションを送信することです。

Vuex のミューテーションはイベントと非常に似ています。各ミューテーションには文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー) があります。このコールバック関数は、実際に状態変更を行う場所であり、最初のパラメータとして状態を受け取ります。

Action

アクションはミューテーションに似ていますが、違いは次のとおりです。

アクション 送信されたものは突然変異であり、状態の直接の変更ではありません。

アクションには、任意の非同期操作を含めることができます。

例

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

ストアの使用法

ストアを使用する前に、まず vuex をインストールする必要があります:

npm install vuex

Vuex のインストール後, ストアを作成しましょう。作成は簡単です。初期状態オブジェクトといくつかのミューテーションを指定するだけです。

新しいストア フォルダーを作成し、新しい Index.js ファイルを作成します:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++;
        }
    }
})

Vue コンポーネントの this.$store プロパティにアクセスするには、作成したストアを提供する必要がありますVue インスタンスの場合。 Vuex は、ルート コンポーネントからすべてのサブコンポーネントにストア オプションの形式でストアを「注入」するメカニズムを提供します。

つまり、これを main.js ファイルにインポートし、vue ルート インスタンスに登録します。

import store from './store'
...
new Vue({
    el: "#app",
    store: store,
...

その後、任意の vue のメソッド属性の下に store.commit(' を渡すことができます。コンポーネント インクリメント') を呼び出して次のようにします:

        ...
        methods:{
            increment:function(){
                this.$store.commit("increment");
                console.log(this.$store.state.count);
            },
            ...

効果は次のとおりです:

[関連する推奨事項: 「vue.js チュートリアル 」 "]

以上がvue でのストアの使用法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。