vuexの用途は何ですか?

vuex は、vue フレームワークに基づく状態管理ライブラリであり、複雑なアプリケーションのデータ ステータスを管理し、兄弟コンポーネント間の通信や多層ネストされたコンポーネントの送信など、コンポーネント間のデータ共有を容易にすることができます。など。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態が予測可能な方法で変化することを保証します。

Vuex は、Vue.js アプリケーション用に特別に開発された状態管理モデルで、vue フレームワークに基づく状態管理ライブラリです。複雑なアプリケーションのデータステータスを管理し、兄弟コンポーネント間の通信、多層のネストされたコンポーネント間の値の転送など、コンポーネント間のデータ共有を容易にすることができます。

Vuex は、集中ストレージを使用してアプリケーションのすべてのコンポーネントのステータスを管理し、対応するルールを使用してステータスが予測可能な方法で変化することを保証します。

Vuex は、Vue の公式デバッグ ツール devtools 拡張機能 にも統合されており、ゼロ構成のタイムトラベル デバッグ、状態スナップショットのインポートおよびエクスポートなどの高度なデバッグ機能を提供します。

Vuex のコア機能

(1)State: 唯一のパブリック データ ソースを提供し、すべての共有データはストアの State に保存する必要があります。

#コンポーネント内の State にアクセスする方法:

A.this.$store.state。グローバル データ名は次のとおりです: this.$store.state.count

Bまず、必要に応じて、mapState 関数をインポートします: import {mapState } from 'vuex'

次に、データが計算された属性にマップされます: computed:{ ...mapState(['global data name']) }

( 2) ミューテーション: $store のデータを変更するために使用されます

使用法:

store.js ファイルを開き、ミューテーションに次のコードを追加します:

mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

次に、次のように Addition.vue のボタンにイベント コードを追加します:

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit(&#39;add&#39;,10)
  }
}

ミューテーションを使用する 2 番目の方法:

import { mapMutations } from ‘vuex’
methods:{…mapMutations([‘add’])}

は次のとおりです:

import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

(3 )アクション: ミューテーションで非同期コードを記述することはできません。vue デバッガーで表示エラーが発生します。 vuex では、Action を使用して非同期操作を実行できます。

手順は次のとおりです。

store.js ファイルを開き、アクションを次のように変更します。

actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },2000)
  }
}

次に、次のようにイベント コードを Addition.vue のボタンに追加します。

<button @click="AddAsync">...+1</button>

methods:{
  AddAsync(){
    this.$store.dispatch(&#39;addAsync&#39;,5)
  }
}

(4) Getter: ストア内のデータを処理して新しいデータを形成するために使用されます。

ストアに保存されたデータをラップするだけで、ストアに保存されたデータは変更されません。ストアのデータが変更されると、Getter によって生成されたコンテンツもそれに応じて変更されます。

store.js ファイルを開いてゲッターを次のように追加します。

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

次に、Addition.vue を開いて getters を使用して補間式を追加します

<h3>{{$store.getters.showNum}}</h3>

また、Addition.vue にマップゲッターをインポートすることもできます。 、計算された属性にマッピングします

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

関連する推奨事項:

2020 フロントエンド Vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、こちらをご覧ください:

プログラミング教育! ！

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