storeパターン
vue.jsで親と子のやりとりは$emitやpropsで行っていた。
シンプルなうちはいいが、孫から受け取りたいとかになるとややこしくなる。
そこで、コンポーネントをまたぐ変数は別の場所に保存し、みんなそこからアクセスしてもらう。
この保存場所をstoreという。
const store = { state: { message: '' //コンポーネントをまたぐ変数 }, setMessage (msg) { //setterを通じてアクセスする this.state.message = msg; } }; メッセージの書き換え store.message('変更です')
[Vue.js]Vuexを使わずにコンポーネント間のデータやり取り・状態管理する方法3パターン | Black Everyday Company
で、これをまとめたライブラリがvuex
vuexの使い方
const store = new Vuex.Store({ state: { message: '', }, mutations: { setMessage(state, payload) { state.message = payload } } }); メッセージの書き換え this.$store.commit('setMessage', '変更です')