When the state preference in my vuex store changes, I need to update the DOM by calling the checkValue method each time.
This is how my index.html looks like:
<div id="app">
<my-component></my-component>
<my-other-component></my-other-component>
</div>
I have initialized Vue and imported the Vuex store here:
Here's my_component.js file:
Vue.component('my-component',require('./MyComponent.vue'));
import store from "./store.js"
Vue.component('my-other-component',require('./MyOtherComponent.vue'));
new Vue({
el : "#app",
data : {},
store,
method : {},
})
This is the component where the DOM needs to be updated when the state preference in the store changes:
Check out MyComponent.vue below:
<template>
<div v-for="object in objects" v-if="checkValue(object)">
<p>hello</p>
</div>
</template>
<script>
methods : {
checkValue : function(object) {
if(this.preference) {
// perform some logic on preference
// return true or false based on the result
}
}
},
computed : {
preference : function() {
return this.$store.getters.getPreference;
}
}
</script>
And here is my Vuex store file - store.js:
const store = new Vuex.Store({
state : {
preferenceList : {components : {}},
},
getters : {
getPreference : state => {
return state.preferenceList;
}
},
mutations : {
setPreference : (state, payload) {
state.preference['component'] = {object_id : payload.object_id}
}
}
Lastly, this component is where the vuex store gets updated when clicking on a li element:
Take a look at MyOtherComponent.vue:
<div>
<li v-for="component in components" @click="componentClicked(object)">
</li>
</div>
<script type="text/javascript">
methods : {
componentClicked : function(object) {
let payload = {};
payload.object_id = object.id;
this.$store.commit('setPreference', payload);
}
}
</script>