-
-
Notifications
You must be signed in to change notification settings - Fork 666
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rule proposition: no-side-effects-in-computed-properties
#58
Comments
I like it! |
Would this rule also check for things like: export default {
computed: {
hello() {
this.sideEffect() // <- error "Unexpected side effect in computed property 'hello'"
const formattedValue = this.format(value) // <- no error
return `Hello ${this.firstName} ${this.lastName}`
}
},
methods: {
sideEffect() {
// some side effect.
},
format(value) {
return // ...
}
} |
We could @LinusBorg, so the assumptions would be to throw an error when:
Am I missing something? // Update |
When using map etc., we would use the return value, right? this.something.map(/* ... */) // doesn't make sense
const result = this.something.map(/* ... */) // makes sense The same is true for method calls - if we don't do something with the return value, it's safe to assume that the method we call has a side-effect. this.myMethod(value) // this must have a side-effect, otherwise there's no reason in calling it, right?
const result = this.myMethod(value) // this *might* have a side-effect, but could just be a helper. |
I would check all
This case has more sense, I do however think that methods you want to call in computed properties should be pure, and perhaps using standalone functions instead of component's methods should be considered better practice? Not sure entirely though... E.g:
over this:
The best would be to actually check all methods bodies for any side effect presences and then if this method is called trigger error, but that complicates things. For example one method doesn't introduce side-effect but only calls other method which has side effect and we end up with nice complex tree of side-or-not-effects hard to properly detect. |
A pure function can call other pure functions and still be pure I think. 😸 |
@michalsnik What about method that transform your data with other props? export default {
props: {
repeat: {
default: 1,
},
},
data() {
return {
num: 10
}
},
computed: {
result() {
return this.add(this.num);
}
},
methods: {
add(num) {
for (let i = 0; i < this.repeat; i++) {
num += i
}
return num
}
}
} (Sorry for the boring example.) |
@Akryum that example is not a pure functions, but it doesn't have any side-effects either. |
Hah, I don't think we can catch everything. I'll just start with the simplest implementation as the initial version of this rule and we'll see what's next then. In your example @Akryum I'd opt for moving this function up, so that there is no method called in computed property that uses other props or data. But it's maybe the case for another rule 🤔 (Being explicit in computed properties seems like a good practice to me). function add(num, repeatTimes) {
for (let i = 0; i < repeatTimes; i++) {
num += i
}
return num
}
export default {
props: {
repeat: {
default: 1,
},
},
data() {
return {
num: 10
}
},
computed: {
result() {
return add(this.num, this.repeat);
}
},
methods: {}
} |
My PR is almost ready #69 |
Okay, there is maybe one more thing @LinusBorg mentioned we can add to this implementation:
I'll consider this too in initial implementation. |
no-side-effects-in-computed-properties
no-side-effects-in-computed-properties
It will be nice if we we have support for plugins provided by vuejs team Vue-router export default {
computed: {
foo () {
this.$router.go(-1)
this.$router.push({})
this.$router.replace({})
return true
}
}
} Vuex export default {
computed: {
foo () {
this.$store.commit({}) // Mutations
this.$store.dispatch('', {}) // Actions
return true
}
}
} |
@armano2 The proposed rule should reject all of these examples. |
@LinusBorg you are right i missed last message 🐰 |
Interesting idea @armano2, however I'd prefer to add this in a separate PR after initial rule is merged. |
There is also one case with prototype function witch is not supported return Array.prototype.unshift.apply(this.object, data) // i know this is invalid return Object.assign(this.object, data); |
Ready in |
This rule would check if there are no side effects inside computed properties.
So this example would throw an error:
What do you think @mysticatea @chrisvfritz ?
The text was updated successfully, but these errors were encountered: