CODEWITHSUNDEEP
laravelvue.js
Sidney Sousa
Sidney Sousa

Reputation: 3614

Vuex state no showing in Laravel

I have a Laravel installation and want to use vuejs for the fornt-end. So, I ran npm install --save vuex and all the installation was successful.

The in app.js ( /resources/js/app.js ) I imported the store file and added it to the vue instance object:

import store from './store/store'

const app = new Vue({
    el: '#app',
    router,
    store
});

Inside store.js I have the following:

import Vue from 'vue'
import Vuex from 'vuex'

import jobs from './modules/jobs'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        jobs
    }
});

The jobs.js (store/modules/jpbs.js):

const state = {
    value: 1,
    jobs: [
        { name: 'Milton', age: '23'}
    ]
}

const getters = {
    jobs: state => {
        return state.jobs;
    },
    value: state => {
        return state.value;
    }
}

//EDITED
export default {
    state,
    getters
};

Ultimately, I tried to test how things go if I get anything from the state or getter:

    <button type="button" class="btn bgDark mt-2" data-toggle="modal" data-target="#exampleModalCenter">
    Add New {{ this.$store.state.value }}
    </button>

When I visit my site, the value does not show and I dont see errors in the console.

Is there perhaps anything I missed in the vuex configuration?

Upvotes: 0

Views: 731

Answers (2)

eradima
eradima

Reputation: 81

If you are trying to get the value from your jobs.js module you need the to reference it like this:

this.$store.state.jobs.value

( the this is optional)

If you look at the first example in the Vuex Documents - The last two lines of code are

store.state.a
store.state.b

where a and b are the module names (jobs in your case)

Upvotes: 1

Cristian David Home Acosta
Cristian David Home Acosta

Reputation: 45

this should not be used within html templates, Vue automatically assumes that variables or objects written within brackets {{ }} are attributes of this.

Upvotes: 0

Related Questions