vuex を使用して状態オブジェクトを操作する方法

今回はvuexを使って状態オブジェクトを操作する方法と、vuexを使って状態オブジェクトを操作する際の注意点を紹介します。以下は実際的なケースですので見てみましょう。

Vuexとは何ですか?

VueX は、Vue.js アプリケーション用に特別に設計された状態管理アーキテクチャであり、各 vue コンポーネントの変更可能な状態を均一に管理および維持します (vue コンポーネント内の特定のデータとして理解できます)。

Vue には、状態、ゲッター、ミューテーション、アクション、モジュールという 5 つの中心的な概念があります。

概要

state => 基本データ
getter => 基本データから派生したデータ
mutations => 変更されたデータを送信するメソッド、同期!
actions => デコレーターのように、突然変異をラップして非同期にします。
modules => ModularityVuex

State

stateはVuexの基本データです!

単一の状態ツリー

Vuex は単一の状態ツリーを使用します。つまり、1 つのオブジェクトにすべての状態データが含まれます。コンストラクター オプションとして、state は必要なすべての基本的な状態パラメーターを定義します。

Vue コンポーネントの Vuex 属性を取得します

•次のように、Vue の Computed を通じて Vuex の状態を取得できます:

const store = new Vuex.Store({
  state: {
    count:0
  }
})
const app = new Vue({
  //..
  store,
  computed: {
    count: function(){
      return this.$store.state.count
    }
  },
  //..
})

状態オブジェクトを操作する vuex のサンプル コードを見てみましょう

store.state.count が変更されるたびに、計算されたプロパティが再計算され、関連する DOM が更新されます。

すべての Vuex アプリケーションの中核はストア (倉庫) です。

vuex について説明するために公式ドキュメントから 2 つの文を引用します:

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

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

vuex で状態

1 を使用し、ルートコンポーネントにストアを導入すると、サブコンポーネントは this.$store.state.data 名を通じてこの グローバル属性 を取得できます。

vue-cliを使って作成したプロジェクト、App.vueがルートコンポーネント

App.vueコード

<template>
 <p id="app">
   <h1>{{$store.state.count}}</h1>  
  <router-view/>
 </p>
</template>
<script>
 import store from '@/vuex/store';
export default {
 name: 'App',
 store
}
</script>
<style>
</style>

コンポーネントフォルダー内のCount.vueコード

<template>
 <p>
   <h3>{{this.$store.state.count}}</h3>
 </p>
</template>
<script> 
  export default {
    name:'count'，
  }
</script>
<style scoped>
</style>

store.jsコード

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
 count: 1
}
export default new Vuex.Store({
 state，
})

2、グローバル属性を取得MapState 補助関数を使用します

このメソッドの利点は、属性名を通じて属性値を直接取得できることです。

Component.vue のコードを変更します

<template>
 <p>
   <h3>{{this.$store.state.count}}--{{count}}</h3>
  <h4>{{index2}}</h4>
 </p>
</template>
<script> 
  import { mapState,mapMutations,mapGetters } from "vuex";
  export default {
    name:'count',
    data:function(){
      return {
        index:10
      }
    },
    //通过对象展开运算符vuex里的属性可以与组件局部属性混用。
    computed:{...mapState(['count']),
      index2() {
        return this.index+30;
      }  
    } ,
  }
</script>
<style scoped>
</style>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue でフィルターを使用する方法

vue を使用して dom のクラスを決定する方法

以上がvuex を使用して状態オブジェクトを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。