Vue.js　

説明

Vue.js では、コンポーネント間でデータをやり取りする方法はいくつかあります。

今回は、Vuexを説明します。

Vuexを使う

Vuexは、Vue.jsの状態管理ライブラリであり、コンポーネント間でデータを共有するために使用することができます。

ストアの定義:

const store = new Vuex.Store({
  state: {
    message: 'Hello from Vuex store!'
  },
  mutations: {
    setMessage: function (state, message) {
      state.message = message
    }
  }
})

子コンポーネントからストアにアクセスする例:

Vue.component('child-component', {
  template: '<div>{{ message }}</div>',
  computed: {
    message: function () {
      return this.$store.state.message
    }
  }
})

ストアの値を変更する例:

this.$store.commit('setMessage', 'New message from parent component!')