Vuex での Mutation 変更ステータス操作の詳細な説明-jsチュートリアル-php.cn

Vuex での Mutation 変更ステータス操作の詳細な説明

前の記事は状態の読み取りについてでしたが、この記事は状態の変更についてです。それは、Mutation の操作方法です。

1. $store.commit( )

Vuex は、ステータスを変更するための commit メソッドを提供します

1.store.js ファイル

const mutations={
  add(state){
    state.count++
  },
  reduce(state){
    state.count--
  }
}

ログイン後にコピー

2. ボタンの変更方法

< ;button @click="$store.commit('reduce')">-

2. 値を渡す

状態を変更する最も簡単な操作実際のプロジェクトでは、状態を変更するときに値を渡す必要があることがよくあります。たとえば、上記の例では毎回 1 を追加するだけですが、今度は渡された値を追加する必要があります。実際には、Mutations に別のパラメータを追加し、コミット時にそれを渡すだけです。具体的なコードを見てみましょう:

1.store.js

const mutations={
  add(state,n){
    state.count+=n
  },
  reduce(state){
    state.count--
  }
}

ログイン後にコピー

2. ボタンの commit() メソッドによって渡されるパラメータを変更します。10 を渡します。これは、それぞれ 10 ずつ加算することを意味します。 time.

3. Mutationsのテンプレート取得方法

実際の開発でも見てみたい $store.commit() のようなメソッドが現れたら、テンプレート内のメソッドと同じ方法で呼び出せるようにしたいと考えています。

例: @click="reduce" は、vuex プラグインを参照しないのと同じです。

1. import を使用して、mapMutation をテンプレート count.vue に導入します:

import { mapState,mapMutations } from 'vuex'

2テンプレートの

人気のチュートリアル

詳細>

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

Vuex での Mutation 変更ステータス操作の詳細な説明