ホームページ > 記事 > ウェブフロントエンド > vuex を使用して状態オブジェクトを操作する方法
今回はvuexを使って状態オブジェクトを操作する方法と、vuexを使って状態オブジェクトを操作する際の注意点を紹介します。
Vuexとは何ですか?
VueX は、Vue.js アプリケーション用に特別に設計された状態管理アーキテクチャであり、各 vue コンポーネントの変更可能な状態を均一に管理および維持します (vue コンポーネント内の特定のデータとして理解できます)。
Vue には、状態、ゲッター、ミューテーション、アクション、モジュールという 5 つの中心的な概念があります。
概要
state => 基本データ
getter => 基本データから派生したデータ
mutations => 変更されたデータを送信するメソッド、同期!
actions => デコレーターのように、突然変異をラップして非同期にします。
modules => Modular Vuex
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 サイトの他の関連記事に注目してください。
推奨書籍:
以上がvuex を使用して状態オブジェクトを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。