I have empty state in the beginning like so
new Vuex.Store({
state: {
comboBoxNewValues: {}
},
Over time, there are mutations which changes the state like so
this.$store.commit('addComboBoxValues', { input: 'foo', value: ['value': 1, 'name': 'bar']});
Using the following mutation code
mutations: {
addComboBoxValues(state, _value) {
state.comboBoxNewValues[_value.input] = _value['value'];
},
}
It works perfectly and mutations also changes the state, Now I want to perform some action on change of the state so in my component I added a computed property like so
computed: {
getComboBoxNewValues() {
return this.$store.state.comboBoxNewValues;
}
}
When I debug using vue-dev-tools, the components computed property has data. Whenever the data changes using mutation in the vuex, that data is reflected in the computed property as well.
Now I add a watcher to it like so
watch: {
getComboBoxNewValues:{
handler: function(to, from) {
console.log("reload");
},
deep: true
}
}
The problem is that the never never gets called, no matter how many times the data has changed in the computed property. Please advice on what I am missing.
Related
I have a Vuex store where I have a getter which works correctly and I can see the changes on the state. But if I call this getter as computed property in component it does not work. The value is still the same.
The store code looks like:
mutations: {
UPDATE_SERVER_FILTERS(state, payload) {
this._vm.$set(state, 'serverFilters', payload);
//state.serverFilters = payload; // Both patterns work
},
getters: {
serverFilters(state) {
return state.serverFilters; // This works fine
}
}
}
The component code:
computed: {
serverFilters() {
return this.$store.getters[this.storeName + '/serverFilters'];
},
}
Here is JSFiddle example https://jsfiddle.net/camo/je0gw9t3/4/ which works fine. And it is a problem cause in my project it does not work. I am prepared to die...
How can I solve it?
In the most bottom part:
new Vue({
store,
el: '#example',
data() {
return {};
},
computed: {},
methods: {
changeFilters() {
this.$store.dispatch(this.storeName + '/updateFilters');
// ^^^^^^^^^^^^^^ there is no storeName
},
},
});
The changeFilters method. You are using this.storeName, but there is no this.storeName! Just like the Child component, add storeName: 'a' to the data() then it should work.
https://jsfiddle.net/4yfv3w87/
Here is the debug process for your reference:
First open the Vue Devtools and switch to the timeline tab. And just click the button, you will see that there is no action is being fired. So the problem must be the one who dispatches the action. And then you will notice that the root component doesn't have a storeName.
So don't panic, just try to trace the code. It will only take a few minutes to find out the issue!
Computed properties might have problem to make an observer reference from returned value out of function. Instead of chaining getters and computed properties, why you don't use just getters or computed properties ? In my opinion, it's a bad practice to use them both, and I can't imagine a situation you need it. So if you need filter operations in many components, just make a getter and use getter in components instead of computed properties.
If you really want to chain them, try this:
new Vue({
store,
el: '#example',
data() {
return {
storeName: 'a'
}
},
computed: {
filters() {
get() {
return this.$store.getters[`${this.storeName}/getFilters`];
}
set(newValue) {
this.$store.dispatch(this.storeName + '/updateFilters');
}
},
},
})
Comment please if someone check it. I don't know are it works.
I'm stuck in this situation where I have a getters from Vuex Store, and whenever that getter change (new value update), the local state data(the 'list') should be reassign .
This is my component, which has 'list' in data
And here is my test Successfully change the getSkills to the getSkillsMock, but there is no response from list, list is still an []
You need to set deep to true when watching an array or object so that
Vue knows that it should watch the nested data for changes.
watch: {
getSkills: {
handler () {
this.list = this.getSkills.map(items => {
return { value: items.id, label: items.name }
})
},
deep: true
}
}
I have this getter that get the value of one item in the state:
boxdata: state => {
return state.boxchart.data
},
Now I have another item in state that I use to change the value of getter
Currently I do this when component is mounted but it seems that the data sometimes loads but sometimes does not:
computed: {
...mapGetters(["boxdata"]),
...mapState(['reference_fc'])
},
mounted() {
this.boxdata[0].chartOptions.series[0].data[0]=this.reference_fc.NSR.values
}
So I wonder how can I ensure that the boxdata getter is already updated on the first time that the component loads?
Vue cannot detect array element assignments. This is explained in Caveats.
Try this instead:
this.$set(this.boxdata[0].chartOptions.series[0].data, 0, this.reference_fc.NSR.values)
You shouldn't mutate data using getters. You should use mutations.
Getters are only to get derived state based on store state. see here
In your store :
mutations: {
setBoxdata(state, value) {
state.boxchart.data[0].chartOptions.series[0].data[0] = value;
}
}
In your component :
computed: {
...mapMutations("setBoxdata")
},
mounted() {
this.setBoxData(this.reference_fc.NSR.values);
}
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.
I'm saving an array into local storage
and adding/removing from the array like.
I want the count of the array to update in the component as and when new items get added to the array in localstorage
I am using a computed property:
numOfCodes: {
// getter
get: function() {
let storageItems = localStorage.getItem("items");
if (storageItems) {
var items = JSON.parse(storageItems);
return items.length;
}
return 0;
}
}
The count is not changing as expected. it remains the same.
I have tried using vuex, but still have the issue. the goal is having the value react to the localstorage change
I think a solution to this would be to use vuex, I've mocked up an example below:
On your component:
computed: {
...mapGetters({
itemsCount: 'mockLocalStorage/itemsCount'
})
},
created() {
this.setItems(...);
},
methods: {
...mapActions({
setItems: 'mockLocalStorage/setItems'
})
}
In vuex:
state = {
items: []
};
getters = {
itemsCount: state => state.items.length
};
actions: {
setItems({ commit }, items) {
localStorage.setItem('items', items);
commit('setItems', items);
}
};
this.itemsCount would then be reactive in your component, and you could create a few more actions to add and remove individual items.
The localStorage does not share the reactivity system of Vue. This whole process is handled by Vue itself. See also here. I think you should be able to manually trigger a re-render by forcing Vue to update all of its components using forceUpdate. However, keep in mind that you would have to trigger the re-render whenever you update the localStorage or whenever you expect it to be updated.
Use a watcher.
props: ['storageItems', 'itemsLength'],
watch: {
storageItems: function(newVal, oldVal) {
this.storageItems = newVal
this.itemsLength = newVal.length
}
}