質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

1回答

875閲覧

Vuex: storeの分割されたmodule内で、actionsでもmutationsでもない関数からdispatchを呼びたい。

simpleman

総合スコア17

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

0クリップ

投稿2020/02/15 03:38

編集2022/01/12 10:55

コード内のコメントという形で、該当箇所で質問をさせていただいています。

javascript

1// 2// store/modules/test.js 3// 4..... 5 6const mutations = { 7 ..... 8} 9 10const actions = { 11 ..... 12 deleteAllAboutThisID ({ commit }, payload) { // payload = {id} 13 let id = payload.id; 14 // たくさんのcommit 15 }, 16 ..... 17} 18 19// APIのコールバックで第一引数がmsgと決まっているので、actionsの中に入れてcontext 20// を受け取るということができない。 21function handleMessage (msg) { 22 let type = msg.type; 23 let payload = msg.payload; 24 25 switch (type) { 26 case 'deleteAll': 27 // ここでこのmodule内のactionを呼びたい。 28 // dispatch('deleteAllAboutThisID', {id: id}); 29 } 30} 31 32default export { 33 namespased: true, 34 state, 35 getters, 36 mutations, 37 actions 38}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Vuex.Store のインスタンスに対して名前空間付きで dispatch を呼び出すことができます。
逆に、例え handleMessageactions の中に入れても、そのメソッドをストアを介さずに呼び出した場合はストアの値は更新できないはずです。

↓ Vue コンポーネント外 (ここではボタンクリックイベントのコールバック) からストアのモジュール内のアクションを実行するプログラムの例。

html

1<!DOCTYPE html> 2<html> 3<head> 4 <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> 5 <script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script> 6</head> 7<body> 8 <div id="app">{{ count }}</div> 9 <button id="testButton">test</button> 10 <script> 11Vue.use(Vuex) 12const moduleA = { 13 namespaced: true, 14 state: { 15 count: 10 16 }, 17 mutations: { 18 increment(state) { 19 state.count++ 20 } 21 }, 22 actions: { 23 moduleAction(ctx) { 24 ctx.commit('increment') 25 } 26 } 27} 28/* ストアインスタンスを変数に保存しておく */ 29const store = new Vuex.Store({ 30 modules: { 31 moduleA 32 } 33}) 34new Vue({ 35 el: '#app', 36 store, 37 computed: { 38 ...Vuex.mapState({ 39 count: state => state.moduleA.count 40 }) 41 } 42}) 43document.querySelector('#testButton').addEventListener('click', () => { 44 store.dispatch('moduleA/moduleAction') 45 // ストアインスタンスに対して dispatch メソッドを実行 46}) 47 </script> 48</body> 49</html>

投稿2020/02/15 15:06

R.Mizukami

総合スコア1077

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問