Puis-je passer des paramètres dans les propriétés calculées dans Vue.Js
est-il possible de passer un paramètre dans les propriétés calculées dans Vue.Js. Je peux voir que lorsque getters/setter utilise computed, ils peuvent prendre un paramètre et l’affecter à une variable. comme ici de documentation :
// ...
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]
}
}
}
// ...
Est-ce aussi possible:
// ...
computed: {
fullName: function (salut) {
return salut + ' ' + this.firstName + ' ' + this.lastName
}
}
// ...
Où la propriété calculée prend un argument et renvoie la sortie souhaitée. Cependant, lorsque j'essaie ceci, j'obtiens cette erreur:
vue.common.js: 2250 Uncaught TypeError: fullName n'est pas une fonction (…)
Devrais-je utiliser des méthodes pour de tels cas?
Très probablement, vous voulez utiliser une méthode
<span>{{ fullName('Hi') }}</span>
methods: {
fullName(salut) {
return `${salut} ${this.firstName} ${this.lastName}`
}
}
Plus longue explication
Techniquement, vous pouvez utiliser une propriété calculée avec un paramètre comme celui-ci:
computed: {
fullName() {
return salut => `${salut} ${this.firstName} ${this.lastName}`
}
}
(Merci Unirgy pour le code de base correspondant.)
La différence entre une propriété calculée et une méthode réside dans le fait que les propriétés calculées sont mises en cache et ne changent que lorsque leurs dépendances changent. Une méthode évaluera chaque fois qu'elle s'appelle .
Si vous avez besoin de paramètres, l'utilisation d'une fonction de propriété calculée sur une méthode ne présente généralement aucun avantage. Bien que cela vous permette d'avoir une fonction getter paramétrée liée à l'instance Vue, vous perdez la mise en cache, donc vous ne gagnez vraiment aucun gain. En fait, vous risquez de casser la réactivité (AFAIU). Vous pouvez en savoir plus à ce sujet dans Vue documentation https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
La seule situation utile est lorsque vous devez utiliser un getter et que vous devez le paramétrer. Cette situation se produit par exemple dans Vuex . Dans Vuex, c'est le seul moyen d'obtenir de manière synchrone le résultat paramétré depuis le magasin (les actions sont asynchrones). Ainsi, cette approche est répertoriée par la documentation officielle de Vuex pour ses getters https://vuex.vuejs.org/guide/getters.html#method-style-access
Vous pouvez utiliser des méthodes, mais je préfère quand même utiliser des propriétés calculées à la place de méthodes, si elles ne mutent pas de données ou n’ont pas d’effets externes.
Vous pouvez transmettre les arguments aux propriétés calculées de cette façon (non documenté, mais suggéré par les responsables, ne vous souvenez plus où):
computed: {
fullName: function () {
var vm = this;
return function (salut) {
return salut + ' ' + vm.firstName + ' ' + vm.lastName;
};
}
}
EDIT: Veuillez ne pas utiliser cette solution, elle ne fait que compliquer le code sans aucun avantage.
Techniquement, nous pouvons passer un paramètre à une fonction calculée, de la même manière que nous pouvons passer un paramètre à une fonction getter dans Vuex. Une telle fonction est une fonction qui retourne une fonction.
Par exemple, dans les accesseurs d'un magasin:
{
itemById: function(state) {
return (id) => state.itemPool[id];
}
}
Ce getter peut être mappé sur les fonctions calculées d'un composant:
computed: {
...mapGetters([
'ids',
'itemById'
])
}
Et nous pouvons utiliser cette fonction calculée dans notre modèle comme suit:
<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>
Nous pouvons appliquer la même approche pour créer une méthode calculée qui prend un paramètre.
computed: {
...mapGetters([
'ids',
'itemById'
]),
descriptionById: function() {
return (id) => this.itemById(id).description;
}
}
Et utilisez-le dans notre modèle:
<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>
Cela dit, je ne dis pas ici que c’est la bonne façon de faire les choses avec Vue.
Cependant, j'ai pu constater que lorsque l'élément avec l'ID spécifié est muté dans la boutique, la vue actualise automatiquement son contenu avec les nouvelles propriétés de cet élément (la liaison semble fonctionner correctement).
Filtres sont une fonctionnalité fournie par les composants Vue qui vous permettent d’appliquer le formatage et les transformations à n’importe quelle partie de vos données dynamiques de modèle.
Ils ne modifient pas les données d’un composant ni quoi que ce soit, mais n’affectent que la sortie.
Dites que vous imprimez un nom:
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>Remarquez la syntaxe pour appliquer un filtre, qui est | NomFiltre. Si vous êtes familier avec Unix, il s'agit de l'opérateur de pipe Unix, qui est utilisé pour transmettre la sortie d'une opération comme entrée à la suivante.
La propriété filters du composant est un objet. Un filtre unique est une fonction qui accepte une valeur et renvoie une autre valeur.
La valeur renvoyée est celle qui est réellement imprimée dans le modèle Vue.js.
Vous pouvez passer des paramètres mais ce n’est pas une façon de voir.js ou la façon dont vous le faites est fausse.
Cependant, dans certains cas, vous devez le faire. Je vais vous montrer un exemple simple en transmettant une valeur à la propriété calculée à l'aide de getter et de setter.
<template>
<div>
Your name is {{get_name}} <!-- John Doe at the beginning -->
<button @click="name = 'Roland'">Change it</button>
</div>
</template>
Et le script
export default {
data: () => ({
name: 'John Doe'
}),
computed:{
get_name: {
get () {
return this.name
},
set (new_name) {
this.name = new_name
}
},
}
}
Lorsque le bouton est cliqué, nous passons à la propriété calculée le nom 'Roland' et dans set(), nous changeons le nom de 'John Doe' en 'Roland'.
Ci-dessous, il y a un cas d'utilisation courant lorsque calculé est utilisé avec getter et setter. Supposons que vous ayez la boutique vuex suivante:
export default new Vuex.Store({
state: {
name: 'John Doe'
},
getters: {
get_name: state => state.name
},
mutations: {
set_name: (state, payload) => state.name = payload
},
})
Et dans votre composant, vous voulez ajouter v-model à une entrée mais en utilisant le magasin 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>
computed: {
fullName: (app)=> (salut)=> {
return salut + ' ' + this.firstName + ' ' + this.lastName
}
}
quand tu veux utiliser
<p>{{fullName('your salut')}}</p>
Oui, il existe des méthodes d'utilisation des paramètres. Comme pour les réponses indiquées ci-dessus, dans votre exemple, il est préférable d'utiliser des méthodes, car l'exécution est très légère.
À titre de référence seulement, lorsque la méthode est complexe et que le coût est élevé, vous pouvez mettre les résultats en mémoire cache de la manière suivante:
data() {
return {
fullNameCache:{}
};
}
methods: {
fullName(salut) {
if (!this.fullNameCache[salut]) {
this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
}
return this.fullNameCache[salut];
}
}
remarque: lorsque vous utilisez ceci, faites attention à la mémoire si vous traitez avec des milliers
Vous pouvez également passer des arguments aux Getters en retournant une fonction. Ceci est particulièrement utile lorsque vous souhaitez interroger un tableau dans le magasin:
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
Notez que les accesseurs accessibles via des méthodes s'exécutent chaque fois que vous les appelez et le résultat n'est pas mis en cache.
Cela s'appelle Method-Style Access et it est documenté dans les documents Vue.js .