Update Prop Property When Vuex Store Changes

After a successful mutation to the vuex store (state.posts.post.comments) using this code, and using Vue.set so Vue can recognize the addition of an object property: store/modules/

Solution 1:

Two-way data binding is a great way to achieve this, you can create your own getter/setter method and import it in your Vue components whenever you need it:

exportfunctionmapFields(fields)
{
    let computers = {}
    for (let field of fields) {
        computers[field] = {
            get() {
                returnthis.$store.state[field];
            },
            set(value) {
                this.$store.commit(`UPDATE_${field.toUpperCase()}`, value);
            }
        }
    }
    return computers;
}

Then in your Vue component:

import {mapFields} from'utils.js'; // or whatever the name of the filecomputed: {
   ...mapFields(['mappedState']),
},

Updating this.mappedState in your Vue component:

this.mappedState = ['foo', 'bar'];

will trigger:

this.$store.commit('UPDATE_MAPPEDSTATE', ['foo', 'bar']);

And to get the property's data just call it in your component:

// In your template
{{ mappedState }}

// In Vue methodsthis.mappedState;