是否有可能在Vue.Js中传递计算属性中的参数。我可以看到，当有getter /setter使用computed时，他们可以接受一个参数并将其分配给一个变量。比如这里的文档:
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
}
}
其中computed属性接受一个参数并返回所需的输出。然而，当我尝试这样做时，我得到这个错误:
vue.common.js:2250 Uncaught TypeError: fullName不是函数(…)
我是否应该在这种情况下使用方法?
也可以通过返回函数将参数传递给getter。当你想查询存储中的数组时，这特别有用:
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
注意，通过方法访问的getter将在每次调用时运行，并且结果不会被缓存。
这被称为方法风格访问，它被记录在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>
从技术上讲，我们可以将参数传递给计算函数，就像我们可以在vuex中将参数传递给getter函数一样。这样的函数是返回另一个函数的函数。
例如，在存储的getter中:
{
itemById: function(state) {
return (id) => state.itemPool[id];
}
}
这个getter可以映射到组件的计算函数:
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>
话虽如此，我并不是说这是Vue的正确方式。
但是，我可以观察到，当具有指定ID的项在存储中发生变化时，视图确实会使用该项的新属性自动刷新其内容(绑定似乎工作得很好)。
我想首先重申前面的警告，使用computed(被缓存的)参数只会使computed不被缓存，实际上只是使它成为一个方法。
然而，话虽如此，这里是我能想到的所有可能有边界情况的变化。如果你将其剪切并粘贴到演示应用中，你就会清楚发生了什么:
<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>
