# API リファレンス
# Vuex.Store
import Vuex from 'vuex'
const store = new Vuex.Store({ ...options })
# Vuex.Store コンストラクタオプション
# state
型:
Object | Function
ストアのための ルートステートオブジェクトです。詳細
オブジェクトを返す関数を渡す場合、返されたオブジェクトはルートステートとして使用されます。これは特にモジュールの再利用のためにステートオブジェクトを再利用する場合に便利です。詳細
# mutations
型:
{ [type: string]: Function }
ストアにミューテーションを登録します。ハンドラ関数は第一引数に
state
を常に受け取り(モジュール内で定義されていれば、モジュールのローカルステートを受け取り)、指定されていれば第二引数にpayload
を受け取ります。
# actions
型:
{ [type: string]: Function }
ストアにアクションを登録します。ハンドラ関数は次のプロパティを持つ
context
オブジェクトを受け取ります。:{ state, // `store.state` と同じか、モジュール内にあればローカルステート rootState, // `store.state` と同じ。ただしモジュール内に限る commit, // `store.commit` と同じ dispatch, // `store.dispatch` と同じ getters, // `store.getters` と同じか、モジュール内にあればローカルゲッター rootGetters // `store.getters` と同じ。ただしモジュール内に限る }
そして、第 2 引数の
payload
があれば、それを受け取ります。
# getters
type:
{ [key: string]: Function }
ストアにゲッターを登録します. ゲッター関数は次の引数を受け取ります:
state, // モジュール内で定義されていればモジュールのローカルステート getters // store.getters と同じ
モジュールで定義されたときの仕様
state, // モジュールで定義された場合、モジュールのローカルステート getters, // 現在のモジュールのモジュールのローカルゲッター rootState, // グローバルステート rootGetters // 全てのゲッター
登録されたゲッターは
store.getters
上に公開されます。
# modules
型:
Object
サブモジュールを含む次のような形式のオブジェクトはストアにマージされます。
{ key: { state, mutations actions?, getters?, modules? }, ... }
各モジュールは、ルートオプションに似た
state
とmutations
を含むことができます。モジュールの状態は、モジュールのキーを使って、ストアのルートステートに結合されます。モジュールのミューテーションとゲッターは、第一引数としてルートステートの代わりに、モジュールのローカルステートだけを受け取り、モジュールのアクションのcontext.state
もローカルステートを指すようになります。
# plugins
型:
Array<Function>
プラグイン関数の配列は、ストアに適用されます。このプラグインは、ストアだけを引数として受け取り、外部への永続化、ロギング、デバッギングのために、ミューテーションを監視するか、または、 websocket や observable のような外から渡されるデータのためにミューテーションをディスパッチします。
# strict
型:
Boolean
デフォルト:
false
Vuex ストアを厳格モードにします。厳格モードでは、ミューテーションハンドラ以外で、 Vuex の状態の変更を行うと、エラーが投げられます。
# devtools
型:
Boolean
特定の Vuex インスタンスに対して開発ツールをオン、またはオフにします。インスタンスに false を渡すと、開発ツールのプラグインを購読しないように Vuex ストアに伝えます。1 ページに複数のストアがある場合に便利です。
{ devtools: false }
# Vuex.Store インスタンスプロパティ
# state
type:
Object
ルートステート、読み取り専用です。
# getters
type:
Object
登録されているゲッターを公開します。読み取り専用です。
# Vuex.Store インスタンスメソッド
# commit
commit(type: string, payload?: any, options?: Object)
commit(mutation: Object, options?: Object)
ミューテーションをコミットします。
options
は名前空間付きモジュールで root なミューテーションにコミットできるroot: true
を持つことできます。詳細
# dispatch
dispatch(type: string, payload?: any, options?: Object): Promise<any>
dispatch(action: Object, options?: Object): Promise<any>
アクションをディスパッチします。
options
は名前空間付きモジュールで root なアクションにディスパッチできるroot: true
を持つことできます。 すべてのトリガーされたアクションハンドラを解決するPromiseを返します。詳細
# replaceState
replaceState(state: Object)
ストアのルートステートを置き換えます。これは、ステートのハイドレーションやタイムトラベルのためだけに利用すべきです。
# watch
watch(fn: Function, callback: Function, options?: Object): Function
fn
が返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。fn
は最初の引数としてストアのステートを、2番目の引数としてゲッターを受け取ります。 Vue のvm.$watch
メソッド (opens new window)と同じオプションをオプションのオブジェクトとして受け付けます。監視を止める場合は、返された unwatch 関数を呼び出します。
# subscribe
subscribe(handler: Function, options?: Object): Function
ストアへのミューテーションを購読します。
handler
は、全てのミューテーションの後に呼ばれ、引数として、ミューテーション ディスクリプタとミューテーション後の状態を受け取ります。store.subscribe((mutation, state) => { console.log(mutation.type) console.log(mutation.payload) })
デフォルトでは、新しい
handler
はチェーンの最後に登録されます。つまり、先に追加された他のhandler
が呼び出された後に実行されます。prepend: true
をoptions
に設定することで、handler
をチェーンの最初に登録することができます。store.subscribe(handler, { prepend: true })
購読を停止するには、返された unsubscribe 関数呼び出します。
プラグインの中でもっともよく利用されます。詳細
# subscribeAction
subscribeAction(handler: Function, options?: Object): Function
2.5.0 で新規追加
ストアアクションを購読します。
handler
はディスパッチされたアクションごとに呼び出され、アクション記述子と現在のストア状態を引数として受け取ります:store.subscribeAction((action, state) => { console.log(action.type) console.log(action.payload) })
デフォルトでは、新しい
handler
はチェーンの最後に登録されます。つまり、先に追加された他のhandler
が呼び出された後に実行されます。prepend: true
をoptions
に設定することで、handler
をチェーンの最初に登録することができます。store.subscribeAction(handler, { prepend: true })
購読を停止するには、返された購読解除関数を呼びます。
3.1.0 で新規追加
3.1.0 から、subscribeAction
は購読ハンドラがアクションディスパッチの前 (before)、または*後 (after)*に呼びだすべきかどうか(デフォルトの動作は、before です)指定することもできます。
store.subscribeAction({
before: (action, state) => {
console.log(`before action ${action.type}`)
},
after: (action, state) => {
console.log(`after action ${action.type}`)
}
})
3.4.0 で新規追加
3.4.0から、subscribeAction
に error
ハンドラが追加されました。このハンドラでは、アクションディスパッチの中で投げられたエラーをキャッチすることができます。error
ハンドラは投げられた error
オブジェクトを第3引数として受け取ります。
store.subscribeAction({
error: (action, state, error) => {
console.log(`error action ${action.type}`)
console.error(error)
}
})
subscribeAction
メソッドはプラグインで最も一般的に使用されます。詳細
# registerModule
registerModule(path: string | Array<string>, module: Module, options?: Object)
動的なモジュールを登録します。詳細
options
は前の状態を保存するpreserveState: true
を持つことができます。サーバサイドレンダリングに役立ちます。
# unregisterModule
unregisterModule(path: string | Array<string>)
動的なモジュールを解除します。詳細
# hasModule
hasModule(path: string | Array<string>): boolean
動的なモジュールがすでに登録されているかどうかを確認します。詳細
# hotUpdate
hotUpdate(newOptions: Object)
新しいアクションとミューテーションをホットスワップします。詳細
# コンポーネントをバインドするヘルパー
# mapState
mapState(namespace?: string, map: Array<string> | Object<string | function>): Object
ストアのサブツリーを返すコンポーネントの computed オプションを作成します。詳細
第1引数は、オプションで名前空間文字列にすることができます。詳細
第2引数のオブジェクトのメンバーには関数
function(state: any)
を指定できます。
# mapGetters
mapGetters(namespace?: string, map: Array<string> | Object<string>): Object
ゲッターの評価後の値を返すコンポーネントの computed オプションを作成します。詳細
第1引数は、オプションで名前空間文字列にすることができます。詳細
# mapActions
mapActions(namespace?: string, map: Array<string> | Object<string | function>): Object
アクションをディスパッチするコンポーネントの methods オプションを作成します。詳細
第1引数は、オプションで名前空間文字列にすることができます。詳細
第2引数のオブジェクトのメンバーには関数
function(dispatch: function, ...args: any[])
を指定できます。
# mapMutations
mapMutations(namespace?: string, map: Array<string> | Object<string | function>): Object
ミューテーションをコミットするコンポーネントの methods オプションを作成します。詳細
第1引数は、オプションで名前空間文字列にすることができます。詳細
第2引数のオブジェクトのメンバーには関数
function(commit: function, ...args: any[])
を指定できます。
# createNamespacedHelpers
createNamespacedHelpers(namespace: string): Object
名前空間付けられたコンポーネントバインディングのヘルパーを作成します。返されるオブジェクトは指定された名前空間にバインドされた
mapState
、mapGetters
、mapActions
そしてmapMutations
が含まれます。詳細はこちら