Zenn
🖥

Vuex で複数の子componentで値を共有してみるカウンタの例 ( Vuex child component share store

2023/09/01に公開
tech

NOTE

  • 初学、学習中
  • dispatch とかよくわからんレベル
  • Nuxtでプロジェクト作成した環境

pages/state-counters.vue

<template>
  <div>
    <div>
      <stateCounter/>
      <stateCounter/>
      <stateCounter/>
    </div>
  </div>
</template>

<script>

import StateCounter from '~/components/stateCounter.vue'

export default {
  components: {
    StateCounter
  }
}
</script>

components/stateCounter.vue


<template>
  <div>
    <div>
      <h1> {{ count }} </h1>
      <input type="button" @click="incrementCounter" value="Increment!">
    </div>
  </div>
</template>

<script>

export default {
  computed: {
    count () {
      return this.$store.state.increments.count
    }
  },
  methods: {
    incrementCounter (e) {
      this.$store.commit('increments/increment')
    }
  }
}
</script>

<style>
body {
  text-align: center;
}
</style>

store/increments.js

export const state = () => ({
  count: 1
})

export const mutations = {
  increment (state) {
    state.count++
  },
}

View

どのcomponentのボタンを押してもすべてのカウンタで値が増える

image
image
image

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3148

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2020-05-06

Discussion