Штат Vuex не отображается в Laravel

Question

У меня установлена ​​Laravel, и я хочу использовать vuejs для fornt-end. Итак, я запустил npm install --save vuex и все установки прошли успешно.

В app.js (/resources/js/app.js) я импортировал файл хранилища и добавил его в объект экземпляра vue:

import store from './store/store'

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

Внутри store.js у меня есть следующее:

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

import jobs from './modules/jobs'

Vue.use(Vuex)

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

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
};

В конечном итоге я попытался проверить, как идут дела, если я что-то получу от штата или добытчика:

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

Когда я захожу на сайт, значение не отображается, и я не вижу ошибок в консоли.

Возможно, я что-то пропустил в конфигурации vuex?

Answer 1

Если вы пытаетесь получить значение из вашего модуля jobs.js, вам нужно ссылаться на него следующим образом:

this.$store.state.jobs.value

( this необязательно)

Если вы посмотрите на первый пример в Документах Vuex - Последние две строки кода:

store.state.a
store.state.b

, где a и b - модульимена (вакансии в вашем случае)

Answer 2

this не следует использовать в HTML-шаблонах, Vue автоматически предполагает, что переменные или объекты, записанные в скобках {{ }}, являются атрибутами this.