If multiple components are used, the same prop is displayed.

While using nuxt, we insert multiple components into one template.

We expect the numbers to change only by pressing the buttons on each component, but in fact all components will be the same number.

EX)
Adult [-] 1 [+] Child [-] 0 [+] Infant[-]0[+]
If you press the [+] of an adult,
Adult [-] 2 [+] Child [-] 0 [+] Infant[-]0[+]
I wish there were people, but actually
Adult [-] 2 [+] Child [-] 2 [+] Infant[-]2[+]

If you didn't use vuex, it worked fine.

index.vue(page)

<template lang="pug">
  section.container
      div.number-selectors
        NumberSelector(id="name="hotel"class="hotel" title="room" type="room"v-bind:min=1v-bind:max=6)
        NumberSelector(id="name="adult" class="adult" title="adult" type="person" v-bind:min=1 v-bind:max=8)
        NumberSelector(id="name="child" class="child" title="child" type="person" v-bind:min=0 v-bind:max=6)
        NumberSelector(id=""name="baby" class="baby" title="infant" type="person" v-bind:min=0 v-bind:max=6)
</template>

NumberSelector.vue (component)

<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>

index.js(store)

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
  },
}

I didn't have enough explanation, so please take care of me.

vue.js nuxt.js

2022-09-30 21:40

1 Answers

Use vuex when you want to share the same value between multiple components.vuex is Singleton.If you want the same component to have different values, you should have it in data in the component.
So it's better not to use vuex.

On the other hand, if you really want to use it, you will need to prepare a state for each item as follows:

export const state=()=>({
  reservation: {
    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
  },
}

In addition, computed will need to be fixed.

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

2022-09-30 21:40

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656