是否有可能在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不是函数(…)
我是否应该在这种情况下使用方法?
Computed可以被认为是一个函数。举个关于验证的例子,你可以这样做:
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的缓存。
也可以通过返回函数将参数传递给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文档中。
我没有看到Vue3和/或使用组合API的答案,所以这里是我的位(,因为我总是忘记如何做到这一点)。
你可以通过将computed包装在另一个函数中来让它接受参数,就像这样:
const firstName = ref("John");
const lastName = ref("Doe");
const fullName = (salut: string) =>
computed(() =>
`${salut} ${firstName.value} ${lastName.value}`);
如果你想使用Pinia(传递参数给getter)进行状态管理,你可以使用这个计算getter:
// In component's setup function
const store = useStore();
const fullName = store.fullName("Hello"); // ComputedRef<string>
console.log(fullName) // "Hello John Doe"
你可以传递参数,但这不是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>