Vue의 계산된 속성에 매개 변수를 전달할 수 있는가?

Vue의 계산된 속성에 매개 변수를 전달할 수 있는가?Js

Vue의 계산된 속성에서 매개 변수를 전달할 수 있는가?Js. 계산을 통해 게터/세터를 갖게 되면 파라미터를 가져다가 변수에 할당할 수 있다는 것을 알 수 있다.문서화에서 다음과 같이 설명하십시오.

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

이 또한 가능한가?

// ...
computed: {
  fullName: function (salut) {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}
// ...

계산된 속성이 인수를 사용하고 원하는 출력을 반환하는 경우.그러나 이 방법을 시도할 때 다음과 같은 오류가 발생한다.

vue.common.js:2250 Uncaused TypeError: fullName은 함수가 아님(…)

그런 경우에 내가 방법을 써야 하나?

아마도 당신은 방법을 사용하고 싶을 것이다.

<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`
  }
}

---

긴 설명

기술적으로 다음과 같은 매개 변수를 사용하여 계산된 속성을 사용할 수 있다.

computed: {
   fullName() {
      return salut => `${salut} ${this.firstName} ${this.lastName}`
   }
}

(고마워Unirgy이에 대한 기본 코드의 경우)

계산된 속성과 방법의 차이는 계산된 속성이 캐시되고 종속성이 변경될 때만 변경된다는 것이다.방법은 호출될 때마다 평가할 것이다.

매개변수가 필요한 경우, 일반적으로 이러한 경우 방법보다 계산된 속성 함수를 사용하는 것이 이득이 되지 않는다.Vue 인스턴스에 바인딩된 매개 변수화된 게터 함수를 가질 수 있지만 캐슁이 손실되어 실제로 거기서 얻는 이득이 전혀 없지만, 실제로 반응성(AFAIU)을 깨뜨릴 수 있다.이에 대한 자세한 내용은 Vue 설명서 https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods을 참조하십시오.

유일한 유용한 상황은 당신이 게이터를 사용해야 할 때 파라메트리를 받아야 할 때 뿐이다.예를 들어, 이런 상황은 Vuex에서 일어난다.Vuex에서는 저장소에서 매개 변수화된 결과를 동기식으로 가져올 수 있는 유일한 방법이다(작업은 비동기임).따라서 이 접근방식은 공식 Vuex 문서로 Getters https://vuex.vuejs.org/guide/getters.html#method-style-access에 명시되어 있다.

메소드를 사용할 수 있지만, 나는 여전히 메소드 대신 계산된 속성을 사용하는 것을 선호한다. 만약 그것들이 데이터를 변경하지 않거나 외부 효과가 없다면 말이다.

이렇게 계산된 속성에 인수를 전달할 수 있다(문서화된 것이 아니라 유지관리자가 제안함, 어디에 있는지 기억하지 못함).

computed: {
   fullName: function () {
      var vm = this;
      return function (salut) {
          return salut + ' ' + vm.firstName + ' ' + vm.lastName;  
      };
   }
}

편집: 이 솔루션을 사용하지 마십시오. 아무런 이점도 없이 코드를 복잡하게 만들 뿐이지요.

음, 기술적으로 말해서 우리는 변수를 계산된 함수에 전달할 수 있습니다, 우리가 vuex의 getter 함수에 매개 변수를 전달할 수 있는 것과 같은 방법이지요.그러한 함수는 함수를 반환하는 함수다.

예를 들어, 상점의 getter에서:

{
  itemById: function(state) {
    return (id) => state.itemPool[id];
  }
}

이 게터는 구성 요소의 계산된 기능에 매핑될 수 있다.

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ])
}

그리고 이 계산된 기능을 템플릿에서 다음과 같이 사용할 수 있다.

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>

우리는 같은 접근법을 적용하여 파라미터를 이용하는 계산법을 만들 수 있다.

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ]),
  descriptionById: function() {
    return (id) => this.itemById(id).description;
  }
}

템플릿에 사용:

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>

이런 말을 들으니, 나는 여기서 부에와 함께 일을 하는 것이 올바른 방법이라고 말하는 것이 아니다.

그러나, 스토어에서 지정된 ID를 가진 아이템이 변질되면, 뷰가 자동으로 이 아이템의 새로운 속성으로 그 콘텐츠를 새로 고치는 것을 관찰할 수 있었다(제본은 잘 작동하는 것 같다.

[Vue2] 필터는 템플릿 동적 데이터의 모든 부분에 형식과 변환을 적용할 수 있는 Vue 구성 요소에서 제공하는 기능이다.

구성 요소의 데이터나 어떤 것도 변경하지 않고 출력에만 영향을 미친다.

이름을 인쇄하는 경우:

new Vue({
  el: '#container',
  data() {
    return {
      name: 'Maria',
      lastname: 'Silva'
    }
  },
  filters: {
    prepend: (name, lastname, prefix) => {
      return `${prefix} ${name} ${lastname}`
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container">
  <p>{{ name, lastname | prepend('Hello') }}!</p>
</div>

필터를 적용하기 위한 구문, 즉 | filterName에 주목하십시오.유닉스에 대해 잘 알고 있다면, 유닉스 파이프 오퍼레이터로, 어떤 연산의 출력을 다음 연산에 입력으로 전달하는 데 사용된다.

구성 요소의 필터 속성은 개체임.단일 필터는 값을 받아들이고 다른 값을 반환하는 함수다.

반환된 값은 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
            }
        },
    }    
}

버튼을 클릭하면 '롤랜드'라는 이름을 계산된 속성에 전달하고set()우리는 이름을 '존 도'에서 '롤랜드'로 바꿀 것이다.

아래에는 계산이 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-modelvuex 스토어를 사용하여 입력한다.

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

함수를 반환하여 게이터에게 인수를 전달할 수도 있다.이것은 저장소의 배열을 쿼리할 때 특히 유용하다.

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

메소드를 통해 액세스하는 게터는 호출할 때마다 실행되며 결과는 캐시되지 않는다는 점에 유의하십시오.

이를 Method-Style Access라고 하며 Vue.js 문서에 기록되어 있다.

computed: {
  fullName: (app)=> (salut)=> {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}

당신이 사용하고 싶을 때

<p>{{fullName('your salut')}}</p>

나는 먼저 파라미터와 함께 계산된 (캐시에 저장되는) 것을 사용하는 것이 계산된 것을 단순히 캐시되지 않고, 효과적으로 단지 하나의 방법으로 만든다는 이전의 주의사항을 반복하고 싶다.

그러나, 말하자면, 여기 내가 생각할 수 있는 모든 변형이 있는데, 그 변형은 사용하기에 가장 좋은 케이스일 것이다.이것을 잘라서 데모 앱에 붙여넣으면 무슨 일이 일어나고 있는지 분명해야 한다.

<template>
  <div>

    <div style="background: violet;"> someData, regularComputed: {{ someData }}, {{ regularComputed }} </div>
    <div style="background: cornflowerblue;"> someComputedWithParameterOneLine: {{ someComputedWithParameterOneLine('hello') }} </div>
    <div style="background: lightgreen;"> someComputedWithParameterMultiLine: {{ someComputedWithParameterMultiLine('Yo') }} </div>
    <div style="background: yellow"> someComputedUsingGetterSetterWithParameterMultiLine: {{ someComputedUsingGetterSetterWithParameterMultiLine('Tadah!') }} </div>

    <div>
      <div style="background: orangered;"> inputData: {{ inputData }} </div>
      <input v-model="inputData" />
      <button @click="someComputedUsingGetterSetterWithParameterMultiLine = inputData">
        Update 'someComputedUsingGetterSetterWithParameterMultiLine' with 'inputData'.
      </button>
    </div>

    <div style="background: red"> newConcatenatedString: {{ newConcatenatedString }} </div>

  </div>
</template>

<script>

  export default {

    data() {
      return {
        someData: 'yo',
        inputData: '',
        newConcatenatedString: ''
      }
    },

    computed: {

      regularComputed(){
        return 'dude.'
      },

      someComputedWithParameterOneLine(){
        return (theParam) => `The following is the Parameter from *One* Line Arrow Function >>> ${theParam}`
      },

      someComputedWithParameterMultiLine(){
        return (theParam) => {
          return `The following is the Parameter from *Multi* Line Arrow Function >>> ${theParam}`
        }
      },

      // NOTICE that Computed with GETTER/SETTER is now an Object, that has 2 methods, get() and set(), so after the name of the computed we use : instead of ()
      // thus we do: "someComputedUsingGetterSetterWithParameterMultiLine: {...}" NOT "someComputedUsingGetterSetterWithParameterMultiLine(){...}"
      someComputedUsingGetterSetterWithParameterMultiLine: {
        get () {
          return (theParam) => {
            return `As part of the computed GETTER/SETTER, the following is inside get() which receives a Parameter (using a multi-line Arrow Function) >>> ${theParam}`
          }
        },
        set(newSetValue) {
          console.log('Accessing get() from within the set()', this.someComputedUsingGetterSetterWithParameterMultiLine('hello from inside the Setter, using the Getter.'))
          console.log('Accessing newSetValue in set() >>>>', JSON.stringify(newSetValue))
          this.newConcatenatedString = `**(1)${this.someComputedUsingGetterSetterWithParameterMultiLine('hello from inside the Setter, using the Getter.')}**  This is a concatenation of get() value that had a Parameter, with newSetValue **(2)${newSetValue}** that came into the set().`
        }
      },

    },

  }

</script>

계산은 함수로 간주될 수 있다.예를 들어validation당신은 분명히 다음과 같은 것을 할 수 있다:

    methods: {
        validation(attr){
            switch(attr) {
                case 'email':
                    const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                    return re.test(this.form.email);
                case 'password':
                    return this.form.password.length > 4
            }
        },
        ...
    }

다음과 같이 사용할 수 있는 기능:

  <b-form-input
            id="email"
            v-model="form.email"
            type="email"
            :state="validation('email')"
            required
            placeholder="Enter email"
    ></b-form-input>

다음 항목에 해당하는 캐슁을 여전히 놓칠 수 있다는 점을 유념하십시오.computed.

그래, 매개 변수를 사용하는 방법들이 있다.위에서 설명한 답변과 같이, 당신의 예에서는 실행이 매우 가볍기 때문에 방법을 사용하는 것이 가장 좋다.

참고로 방법이 복잡하고 비용이 많이 드는 상황에서 다음과 같이 결과를 캐시할 수 있다.

data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}

참고: 이 기능을 사용할 때 수천 개의 메모리를 사용할 경우 메모리 주의

참조URL: https://stackoverflow.com/questions/40522634/can-i-pass-parameters-in-computed-properties-in-vue-js