Vue の基本入門: Vuex のインストールと使用

1. vuexとは何か

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中ストレージを使用してアプリケーションのすべてのコンポーネントのステータスを管理し、対応するルールを使用してステータスが予測可能な方法で変更されるようにします。詳細については、公式 Web サイトのドキュメント vuex.vuejs.org/zh/ を参照してください。

以下はvuexの簡単な紹介です

2. インストールと導入

まずvuexをインストールします。

npm インストール vuex --save

main.js に導入後、使用可能になります。

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
//vuex は import Vuex from 'vuex' を使用します

Vue.use(Vuex)
定数ストア = 新しい Vuex.Store({
    州： {
        //グローバル変数数: 31231
    }
})

Vue.config.productionTip = false
    /* eslint を無効にする no-new */
新しいVue({
    el: '#app',
    ルーター、
    //vuexをストアに追加する必要があります。
    コンポーネント: { アプリ },
    テンプレート: '<App/>'
})

3. vuexの使用

<テンプレート>
<div>
      ボスは{{showData}}を持っています
      <HelloWorld2/>
</div>
</テンプレート>

<スクリプト>
'./HelloWorld2' から HelloWorld2 をインポートします。
'./son' から son をインポートします

エクスポートデフォルト{
名前: 'HelloWorld',
データ （） {
  戻る {
       メッセージ2: "",
       クー
    }
},
コンポーネント:{
  こんにちは、
  息子
}、計算: {
  表示データ(){
    this.$store.state.count を返します。
  }
}
}

</スクリプト>

<テンプレート>
<div>
2番目には{{$store.state.count}}があります
</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
名前: 'HelloWorld2',
データ（） {
      戻る {
      }
    }
}
</スクリプト>

4. プロセスの紹介

図に示すように、vuexを使用しない場合のプロセスは、view->actions->state->viewとなります。

vuexを使用した後のプロセスは、vuecomponent->(dispatch)actions->(commit)mutations->(mutate)state->(render)->vuecomponentとなります。

5. 突然変異

状態が変更された場合、Vuex ストア内の状態を変更する唯一の方法は、ミューテーションを送信することです。 Vuex のミューテーションはイベントと非常によく似ています。各ミューテーションには、文字列イベントタイプ (type) とコールバック関数 (handler) があります。このコールバック関数は、実際に状態の変更を行う場所であり、最初の引数として状態を受け取ります。

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
//vuex は import Vuex from 'vuex' を使用します

Vue.use(Vuex)
定数ストア = 新しい Vuex.Store({
    州： {
        //グローバル変数数: 31231
    },
    //状態メソッドの変更: {
        //状態は上記の状態です
        データを追加(状態) {
            //状態の変更 state.count++
        }
    }
})

Vue.config.productionTip = false
    /* eslint を無効にする no-new */
新しいVue({
    el: '#app',
    ルーター、
    //vuexをストアに追加する必要があります。
    コンポーネント: { アプリ },
    テンプレート: '<App/>'
})

次に変更を実行します

<テンプレート>
<div>
      ボスは{{showData}}を持っています
      <HelloWorld2/>
      <button type = "button" v-on:click = "changeData"> 変更ボタン</button>
</div>
</テンプレート>

<スクリプト>
'./HelloWorld2' から HelloWorld2 をインポートします。
'./son' から son をインポートします

エクスポートデフォルト{
名前: 'HelloWorld',
データ （） {
  戻る {
       メッセージ2: "",
    }
},
コンポーネント:{
  こんにちは、
  息子
}、計算: {
  表示データ(){
    this.$store.state.count を返します。
  }
},
メソッド: {
  //変更を実行する changeData(event){
      this.$store.commit("データを追加");
  }
}
}

</スクリプト>

6. ゲッターフィルタリング

突然変異を制限することができます。たとえば、突然変異が 0 未満の場合は、減らすことはできません。

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
//vuex は import Vuex from 'vuex' を使用します

Vue.use(Vuex)
定数ストア = 新しい Vuex.Store({
    州： {
        //グローバル変数数: 0
    },
    //状態メソッドの変更: {
        //状態は上記の状態です
        データを追加(状態) {
            //状態の変更 state.count++
        }
    },
    //フィルターゲッター: {
        getState(状態) {
            状態数 >= 5 の場合
                戻る 5
            } それ以外 {
                状態.countを返す
            }
        }
    }
})

Vue.config.productionTip = false
    /* eslint を無効にする no-new */
新しいVue({
    el: '#app',
    ルーター、
    //vuexをストアに追加する必要があります。
    コンポーネント: { アプリ },
    テンプレート: '<App/>'
})

電話するとき

<テンプレート>
<div>
2番目には{{$store.getters.getState}}があります
</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
名前: 'HelloWorld2',
データ（） {
      戻る {
      }
    }
}
</スクリプト>

7.アクション - 非同期処理

アクションは、次の点を除いて、ミューテーションに似ています。

アクションは、状態を直接変更するのではなく、突然変異を送信します。アクションには任意の非同期操作を含めることができます。突然変異は同期的にのみ処理できる
main.js です。次に例を示します。

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
//vuex は import Vuex from 'vuex' を使用します

Vue.use(Vuex)
定数ストア = 新しい Vuex.Store({
    州： {
        //グローバル変数数: 0
    },
    //状態メソッドの変更: {
        //状態は上記の状態です
        データを追加(状態) {
            //状態の変更 state.count++
        }
    },
    //フィルターゲッター: {
        getState(状態) {
            状態数 >= 5 の場合
                戻る 5
            } それ以外 {
                状態.countを返す
            }
        }
    },
    アクション: {
        //アクショントリガーミューテーションメソッドの利点は非同期処理です。addData(context) {
            //非同期の setTimeout(() => { をシミュレートする
                コンテキスト.commit('addData')
            }, 1000)
        }
    }
})

Vue.config.productionTip = false
    /* eslint を無効にする no-new */
新しいVue({
    el: '#app',
    ルーター、
    //vuexをストアに追加する必要があります。
    コンポーネント: { アプリ },
    テンプレート: '<App/>'
})

送信時にアクションを呼び出す必要があります。

<テンプレート>
<div>
      ボスは{{showData}}を持っています
      <HelloWorld2/>
      <button type = "button" v-on:click = "changeData"> 変更ボタン</button>
</div>
</テンプレート>

<スクリプト>
'./HelloWorld2' から HelloWorld2 をインポートします。
'./son' から son をインポートします

エクスポートデフォルト{
名前: 'HelloWorld',
データ （） {
  戻る {
       メッセージ2: "",
    }
},
コンポーネント:{
  こんにちは、
  息子
}、計算: {
  表示データ(){
    this.$store.getters.getState を返します。
  }
},
メソッド: {
  //変更を実行する changeData(event){
      //操作ミューテーションメソッド //this.$store.commit("addData");
      //アクションによってトリガーされるミューテーション メソッドの代わりにアクションを操作する必要があります this.$store.dispatch("addData");

  }
}
}

</スクリプト>

8.モジュール

単一の状態ツリーを使用することで、すべてのアプリケーション状態が 1 つの大きなオブジェクトに集中化されます。アプリケーションが非常に複雑になると、ストアオブジェクトが非常に肥大化する可能性があります。

上記の問題を解決するために、Vuex ではストアをモジュールに分割することができます。各モジュールには独自の状態、ミューテーション、アクション、ゲッター、さらにはネストされたサブモジュールがあり、上から下まで同じように分割されています。

ルートを分割できる場合は、ファイルはmain.jsには配置されず、vuexに配置されます。新しいstore/index.jsを作成します。

//vuex は import Vue from 'vue' を使用します
'vuex' から Vuex をインポートします

Vue.use(Vuex)

デフォルトの新しいVuex.Storeをエクスポートします({
    州： {
        //グローバル変数数: 0
    },
    //状態メソッドの変更: {
        //状態は上記の状態です
        データを追加(状態) {
            //状態の変更 state.count++
        }
    },
    //フィルターゲッター: {
        getState(状態) {
            状態数 >= 5 の場合
                戻る 5
            } それ以外 {
                状態.countを返す
            }
        }
    },
    アクション: {
        //アクショントリガーミューテーションメソッドの利点は非同期処理です。addData(context) {
            //非同期の setTimeout(() => { をシミュレートする
                コンテキスト.commit('addData')
            }, 1000)
        }
    }
})

main.jsを変更する

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
'./store' からストアをインポートします


Vue.config.productionTip = false
    /* eslint を無効にする no-new */
新しいVue({
    el: '#app',
    ルーター、
    //vuexをストアに追加する必要があります。
    コンポーネント: { アプリ },
    テンプレート: '<App/>'
})

main.jsの状態を取得して新しいstore/state.jsを作成することもできます。

エクスポートデフォルト{
    カウント: 0
}

そしてindex.jsを次のように変更します。

//vuex は import Vue from 'vue' を使用します
'vuex' から Vuex をインポートします
'./state' から状態をインポートします

Vue.use(Vuex)

デフォルトの新しいVuex.Storeをエクスポートします({
    状態: 状態、
    //状態メソッドの変更: {
        //状態は上記の状態です
        データを追加(状態) {
            //状態の変更 state.count++
        }
    },
    //フィルターゲッター: {
        getState(状態) {
            状態数 >= 5 の場合
                戻る 5
            } それ以外 {
                状態.countを返す
            }
        }
    },
    アクション: {
        //アクショントリガーミューテーションメソッドの利点は非同期処理です。addData(context) {
            //非同期の setTimeout(() => { をシミュレートする
                コンテキスト.commit('addData')
            }, 1000)
        }
    }
})

要約する

これで、vue初心者向けのvuexのインストールと使い方に関する記事は終了です。vuexのインストールと使い方についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: