

nuxtを使いながら、一つのコンポネントを一つのテンプレートの中に複数挿入して使っています。

各々のコンポネントのボタンを押すとそのコンポネントだけ数字が変わることを期待していますが、実際にはすべてのコンポネントが同じ数字になってしまいます。

EX)  
大人[-] 1 [+] 子供[-] 0 [+] 乳児[-] 0 [+]  
大人の[+]を押すと  
大人[-] 2 [+] 子供[-] 0 [+] 乳児[-] 0 [+]  
人あってほしいですが、実際は  
大人[-] 2 [+] 子供[-] 2 [+] 乳児[-] 2 [+]

vuexを使ってない場合は正常に動いてました。

index.vue(page)

[code]

    <template lang="pug">
      section.container
          div.number-selectors
            NumberSelector(id="" name="hotel" class="hotel" title="部屋" type="室" v-bind:min=1 v-bind:max=6)
            NumberSelector(id="" name="adult" class="adult" title="大人" type="人" v-bind:min=1 v-bind:max=8)
            NumberSelector(id="" name="child" class="child" title="子供" type="人" v-bind:min=0 v-bind:max=6)
            NumberSelector(id="" name="baby" class="baby" title="乳児" type="人" v-bind:min=0 v-bind:max=6)
    </template>
    
[/code]

NumberSelector.vue(component)

[code]

    <template lang="pug">
      div.number
        table
          tbody
            tr
              td.-title {{ title }}
              td.-minus
                button.operator(v-on:click.prevent="number_minus(result, name)") -
              td.-amount
                p {{ result }} {{ type }}
              td.-plus
                button.operator(v-on:click.prevent="number_plus(result, name)") +
        input(type="hidden" v-bind:name="name" v-bind:value="result")
    </template>
    
    <script>
    export default {
      props: {
        min: Number,
        max: Number,
        type: String,
        title: String,
        name: String,
      },
      computed: {
        result() {
          return this.$store.state.number_result ? this.$store.state.number_result : this.min
        }
      },
      methods: {
        number_minus: function(result, name) {
          if(this.result > (0 || this.min)){
            const number_data = {number_result: result, number_name: name}
            this.$store.commit('number_minus', number_data)
          }
        },
        number_plus: function(result, name) {
          if(this.result < this.max){
            const number_data = {number_result: result, number_name: name}
            this.$store.commit('number_plus', number_data)
          }
        },
      },
    }
    </script>
    
[/code]

index.js(store)

[code]

    export const state = () => ({
      number_result: 0,
      number_name: '',
    })
    
    export const mutations = {
      number_minus(state, number_data) {
        state.number_name = number_data.number_name
        state.number_result = number_data.number_result - 1
      },
      number_plus(state, number_data) {
        state.number_name = number_data.number_name
        state.number_result = number_data.number_result + 1
      },
    }
    
[/code]

説明が足りずコードだけ長くなってしまいましたが、よろしくお願いします。


CC BY-SA 4.0
2019-04-05T09:47:49.573
53951
2022-03-30T03:08:10.650
32796
question
vue.js nuxt.js
一つのコンポネントを複数使う場合、同じpropsが表示される。


vuexは複数のコンポーネント間で同じ値を共有したい時に使います。vuexはSingletonになります。同じコンポーネントでも異なる値をもたせたいなら、コンポーネント内の`data`に持たせるべきです。  
なので、vuexを使わないほうが正しいです。

逆にどうしても使いたい場合は、以下のように各項目ごとの`state`を用意してあげる必要があります。

[code]

    export const state = () => ({
      reservations: {
        hotel: 0,
        adult: 0,
        child: 0,
        baby: 0
      }
    })
    
    export const mutations = {
      number_minus(state, number_data) {
        state.reservations[number_data.number_name] = number_data.number_result - 1
      },
      number_plus(state, number_data) {
        state.reservations[number_data.number_name] = number_data.number_result + 1
      },
    }
    
[/code]

合わせて`computed`も直す必要があるでしょう。

[code]

      computed: {
        result() {
          return this.$store.state.reservations[this.name]
        }
      },
    
[/code]


CC BY-SA 4.0
2019-04-22T07:50:28.390
54386
2019-04-22T07:50:28.390
19313
53951
answer