[javascript] Vue.Js의 계산 속성에서 매개 변수를 전달할 수 있습니까

매개 변수를 전달할 수 있지만 vue.js 방식이 아니거나 수행 방식이 잘못되었습니다.

하지만 getter와 setter를 사용하여 계산 된 속성에 값을 전달하는 간단한 예제를 보여 드리겠습니다.

<template>
    <div>
        Your name is {{get_name}} <!-- John Doe at the beginning -->
        <button @click="name = 'Roland'">Change it</button>
    </div>
</template>

그리고 대본

export default {
    data: () => ({
        name: 'John Doe'
    }),
    computed:{
        get_name: {
            get () {
                return this.name
            },
            set (new_name) {
                this.name = new_name
            }
        },
    }
}

버튼을 클릭하면 계산 된 속성 이름 인 ‘Roland’로 전달되고 set() 이름은 ‘John Doe’에서 ‘Roland’로 변경됩니다.

아래에는 계산이 getter 및 setter와 함께 사용되는 일반적인 사용 사례가 있습니다. 다음과 같은 vuex 상점이 있다고 가정하십시오.

export default new Vuex.Store({
  state: {
    name: 'John Doe'
  },
  getters: {
    get_name: state => state.name
  },
  mutations: {
    set_name: (state, payload) => state.name = payload
  },
})

그리고 구성 요소 v-model에서 vuex 저장소를 사용하여 입력 에 추가 하려고합니다.

<template>
    <div>
        <input type="text" v-model="get_name">
        {{get_name}}
    </div>
</template>
<script>
export default {
    computed:{
        get_name: {
            get () {
                return this.$store.getters.get_name
            },
            set (new_name) {
                this.$store.commit('set_name', new_name)
            }
        },
    }
}
</script>

답변