院卒新人サラリーマンのメモ代わり

備忘としてのメモを記載

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', '変更です')