Vuexでアプリケーションの状態を管理する
Vuexとは
データとその状態を一括管理する「状態管理」のための拡張ライブラリ。
アプリケーション規模が大きくなり、コンポーネントの数も増えていくと、
同じ「data」にアクセスしたいという場合、親->子->孫->曽孫
のように「props」「emit」を受け渡していかなければなりません。Vuexを使用するとどのコンポーネントからでも同じ「data」にアクセスできるようにアプリケーション全体としてのリアクティブプロパティを定義し管理することができます。
┏━┳━┳━┳━┓
┃ ┃
┃ コンポーネント ┃
┃ ┃
┗━┻━┻━┻━┛
自動的に反映 ↑
┏━┳━┳━┳━┓
┃ ┃
┃ Vuex ┃
┃ ┃
┗━┻━┻━┻━┛
↓ 自動的に反映
┏━┳━┳━┳━┓
┃ ┃
┃ コンポーネント ┃
┃ ┃
┗━┻━┻━┻━┛
storeの作成
storeはアプリケーション内に作った「仮想のデータベースのようなもの」と思ってください。
import Vue from 'vue';
import Vuex from 'vuex';
import store from './store'; //追加
Vue.use(Vuex);
new Vue({
el: '#app',
store, // ストアをVueアプリケーションに登録する
components: {
MyApp
},
});
単一コンポーネント毎に「store.js」を読み込む必要があるため、ストアのインスタンスを
Vueアプリケーションのルートに登録することで、コンポーネントのインスタンスプロパティを $store
としてどこからでも使用できるようになる。
Vue.use(プラグイン名)
プラグインを使うための記述
new インスタンス生成前に読み込まれる。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state){
state.count ++
}
}
})
export default store
Vuexの基本的なイメージ
コンポーネントからState(状態)
を更新したい場合、アクション
と ミューテーション
を使います。
State (ステート)
ステートは、ストアで管理している状態そのもの。
ステートはミューテーション
以外の場所から変更することはできません。
getter (ゲッター)
ステートを取得するための算出データであり、computed
muthods
の中間の様な存在。
JavaScriptファイル内で使えるcomputed
というイメージ。
Mutations (ミューテーション)
ステートを変更できる唯一のメソッドであり、コンポーネントでいうところのmethods
引数として、state
とpayload(コミットからの引数)
Commit (コミット)
ここでのコミットは、登録されているミューテーション
を呼び出すインスタンスメソッド
。
コンポーネントでいうところでいうところの$emit
と似ていて、任意で引数を取れる。
Actions (アクション)
非同期処理を含めることのできるメソッド。
データの加工や非同期処理を行い、その結果をミューテーションへコミットする。
dispatch (ディスパッチ)
登録されているアクションを呼び出すインスタンスメソッド
。
別のアクション内からも使用できる。任意で引数を持たせることができる。
Author And Source
この問題について(Vuexでアプリケーションの状態を管理する), 我々は、より多くの情報をここで見つけました https://qiita.com/annaaida/items/f6cc72b92968ddd1cbe7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .