I have a component Foo with Vuex binding mockedVuexBinding (which is essentially a computed prop).
I want to keep tests simple and don't want to mock the whole store. All vuex bindings I just replaced with computed stubs in test, like this:
const wrapper = shallowMount(Foo, {
computed: {
mockedVuexBinding: () => 'foo'
}
}
But then It turns out that I need to test some behavior from Foo, which relays on change of computed property. So I want to update my computed with a value and test how component reacts on it (e.g. emits new value).
There is no such method as setComputed by analogy with wrapper.setProps or wrapper.setData, so how can I do it? How to replace a mocked computed value with different value?
As usual we can mock everything, in order to mock behavior when computed value changes during test we can do the following:
const wrapper = mount(Component, {
data() {
return {
computedSwitcher: false
};
},
computed: {
someComputed: {
get() {
return this.computedSwitcher;
},
set(val) {
this.computedSwitcher = val;
}
}
}
});
And then when we need to change computed during test we do:
wrapper.vm.someComputed = true;
In other words we link computed to a mocked computedSwitcher that doesn't exist in a real component just for the purpose of testing to mock computed behavior.
One thing to remember, if computed value triggers re-rendering and we want to check something connected to this, after changing computed, also call
await wrapper.vm.$nextTick();
Related
I have this mixin:
export default {
computed: {
headerValues: function () {
return this.headers.map(header => header.value);
}
},
methods: {
getTextAlignment(headerValue) {
const header = this.headers.find(header => header.value === headerValue);
return header.align
? `text-${header.align}`
: '';
},
}
};
The method and the computed property depend on a field called headers. Now I have two components that use that mixin, but in one of them, headers is a prop and in the other, a computed property.
I would like to, somehow, make this mixin self-contained, so its methods doesn't depend on a field that the user may forget to declare. This is somewhat a diffuse question, but what I want to achieve is a mixin with a well-defined interface, that doesn't have it's functionality splitted between those components that import it and itself. Any ideas?
I need do fire a function within component when my vuex state data change, but it does not work , is there any wrong usage about watch hook for vuex?
const state = {
currentQueryParameter:[],
};
const mutations = {
currentQueryParameter(state,info){
state.currentQueryParameter[info.index]=info.value
Vue.set(info, info.index, info.value);
}
}
in component
watch: {
'$store.state.currentQueryParameter': function() {
console.log("changed")
this.getData()
}
},
What you are doing is technically correct and will work.
However several thing are still going wrong:
If you want your state to be reactive you need to fill Arrays with native array methods (.push(), .splice() etc). Vue.set() is only used to set Object properties.
You are watching currentQueryParameter, which is an Array. Its value does not change through your mutation - it stays the same Array. If you want to watch nested elements as well, you need to use the deep flag in your watcher, like so:
watch: {
'$store.state.currentQueryParameter': {
deep: true,
handler(newVal) {
console.log('queryParameter changed');
}
}
}
I don't know what you are trying to do with this one in your mutation:
Vue.set(info, info.index, info.value); but you should not mutate the properties you pass to a function.
So I am working with what would appear to be a simple issue, but it is eluding me this evening. I have a value that is set in a Vuex store. In my component file, I declare a constant where the value is retrieved from the store. Everything up to this point works perfectly.
Then, upon submitting a form in the component a script function is run. Within that function, I need to pass the value from the Vuex store along with a couple of other arguments to another function. The function gets call, the arguments are passed, and it all works as expected.
However ... I am getting console errors stating ...
Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers.
What is the correct what to retrieve a value from the Vuex store and then pass that value to a function?
Some more detail here ... Page 1 stores an object representing a CognitoUser in the store using a mutation function which works as expected, then transitions to Page 2. Page 2 retrieves the object from the store (tried both the data and computed methods mentioned below as well as using the getter directly in the code - all fail the same). Within a method on Page 2, the object from the store is accessible. However, that method attempts to call the Amplify completeNewPassword method, passing the CongnitoUser object as an argument. This is the point that the error appears stating that the mutation handler should be used even though there is no change to the object on my end.
....
computed: {
user: {
get(){
return this.$store.getters[ 'security/localUser' ]
},
set( value ){
this.$store.commit( 'security/setLocalUser', value )
}
}
},
....
methods: {
async submitForm(){
this.$Amplify.Auth.completeNewPassword( this.user, this.model.password, this.requiredAttributes )
.then( data => {
....
This is almost certainly a duplicate question. You can refer to my answer here.
Basically you should pass the Vuex value to a local data item and use that in your component function. Something like this.
<script>
export default {
data: () => ({
localDataItem: this.$store.getters.vuexItem,
})
methods: {
doSomething() {
use this.localDataItem.here
}
}
}
</script>
The canonical way of handling this by using computed properties. You define a computed property with getter and setter and proxy access to vuex thru it.
computed: {
localProperty: {
get: function () {
return this.$store.getters.data
},
set: function (val) {
this.$store.commit(“mutationName”, val )
}
}
}
Now you can use localProperty just as we use any other property defined on data. And all the changes get propagated thru the store.
Try if this work
<template>
<div>
<input :value="user" #change="onChangeUser($event.target.value)"></input>
</div>
</template>
<script>
computed: {
user() {
return this.$store.getters[ 'security/localUser' ]
}
},
methods: {
onChangeUser(user) {
this.$store.commit( 'security/setLocalUser', user );
},
async submitForm(){
this.$Amplify.Auth.completeNewPassword( this.user, this.model.password, this.requiredAttributes )
.then( data => {
...
}
</script>
Here is a computed getter and setter from a vue component:
paidStartHours : {
get() {
return moment(this.position.paid_start, global.DB_DATETIME).format('HH');
},
set(value) {
this.$store.commit({
type : 'updatePaidStartHours',
newValue : value,
position : this.position
});
}
}
On get, it returns the hours (HH) from position.paid_start. On set, it commits a store mutation, which essentially recreates the time string for position.paid_start.
In is bound (two-way) to an input as follows:
<input v-model="paidStartHours" type="text">
On initial load, computed property paidStartHours is correct (per Vue Tools).
When I update the input however, the value of paidStartHours does not change. I know that the commit is successful, because the props that are handed to the component are correct. It makes no sense to me.
EDIT:
The code in the updatePaidStartHours mutation has changed a number of times. For example, I tried this:
updatePaidStartHours(state, payload) {
payload.position.paid_start = 999;
}
The value of the passed prop changed to 999, however the value of the computed prop remained the same.
EDIT II:
I don't think it is worth trying to resolve this issue because I think my whole Vue / Webpack / Node installation is very sick. For example, this morning I delightedly followed this answer, Vuejs and Webpack: Why is store undefined in child components, to import an instantiated store into my App. It all seemed fine but after about 8 hours of stuffing about I see that NO store properties are reactive. I reverted to importing the config only, and now most of my store properties are reactive, but sadly not the ones above. I think I need to abandon the approach until I get time to revisit blow away my Vue / Webpack / Node install and start again.
Vuex mutations should be called from Vuex actions only - so in your code you should dispatch an action, not a mutation. Also, your mutation function is expected to mutate the store argument - not the payload one. Your getter is also wrong - it should use this.$store.getters and not your local component data.
paidStartHours : {
get() {
return moment(this.$store.getters.position.paid_start, global.DB_DATETIME).format('HH');
},
set(value) {
this.$store.dispatch('updatePaidStartHours',value);
}
}
Vuex module:
// initial state
const state = {
position:
{
paid_start: null
}
};
// getters
const getters = {
position: (state) => state.position
}
// actions
const actions = {
updatePaidStartHours ({commit}, payload)
{
commit('SET_START_HOURS', payload);
}
}
// mutations
const mutations = {
SET_START_HOURS (state, payload)
{
state.position.paid_start = payload;
}
}
I'm beginner in vue
I'm trying to push a computed data with name , that name come from vuex which comes after creating the instance
How can i push new computed property to the instance in the created() hook ??
Here is the code
computed: {
// 3 - i want to extract the object properties here computed
// that is easy bu using spread operator ...
// Problem : vue intialize computed before the created() hook
// so the spreed work befor passing the filling the object
...this.mapGettersObj
},
created(){
// 1- i can access only this line after creating the object
this.stocks = this.$store.state
let arr=[]
for (let stock in this.stocks){
arr.push(stock+'Getter')
}
// 2 - mapGetters returns an object
this.mapGettersObj=mapGetters(arr)
}
If I can create new computed value after creating that will solve the problem
You can do this in beforeCreate hook。
beforeCreate: function() {
this.$options.computed = {
demo2: function() {
return this.demo
}
}
}
I don't know why you are doing what you do, but if you want to have a variable available before the computed is called you can use beforeCreate hook: https://alligator.io/vuejs/component-lifecycle/
You could also do something in the lines of
computed: {
...function() {
this.stocks = this.$store.state
let arr=[]
for (let stock in this.stocks){
arr.push(stock+'Getter')
}
return mapGetters(arr);
}();
},