Accessing Vue components data

Question

I'm having trouble accessing data in Vue component I use prop to pass my data from view to component like this. I'm using Laravel.

<fav-btn v-bind:store="{{ $store }}"></fav-btn>

And my component looks like this:

<template>
    <a href="#" class="btn-link text-danger" v-on:click="favorite">
        <i v-bind:class="{ 'fa fa-heart fa-2x': isFavorited == true, 'fa fa-heart-o fa-2x': isFavorited == false }" class="" aria-hidden="true"></i>
    </a>
</template>

<script>
    export default {

        props: ['store'],

        data(){
            return{

                isFavorited: this.store.favoritable.isFavorited,

            }
        },

        methods: {
            favorite: function () {
                this.AjaxRequest();
                this.ToggleFav();
            },

            ToggleFav: function () {
                this.isFavorited = !(this.isFavorited);
            },

            AjaxRequest: function () {
                if (this.isFavorited)
                {
                    axios.delete('stores/' + this.store.favoritable_id);
                }

                else {
                    axios.post('stores/' + this.store.favoritable_id);
                }
            }
        }
    }
</script>

In Vue devtools I can see all the objects in props but I can't access them the isFavorited always stays false. Am I accessing the objects attributes incorrectly?

Answer 1

You are doing it wrong. You shouldn't diractly mutate a value which is in store. You should write a mutator in the store file and change value by that. Here is the docs.

https://vuex.vuejs.org/en/mutations.html