Vuex 状态在 Laravel 中没有显示答案

【问题标题】：Vuex state no showing in LaravelVuex 状态在 Laravel 中没有显示
【发布时间】：2019-07-04 17:06:20
【问题描述】：

我有一个 Laravel 安装，并且想在前端使用 vuejs。所以，我运行 npm install --save vuex 并且所有的安装都成功了。

在 app.js ( /resources/js/app.js ) 中我导入了 store 文件并将其添加到 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
};

最终，我尝试测试如果我从 state 或 getter 获得任何东西，事情会如何发展：

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

当我访问我的网站时，该值不显示，并且我在控制台中看不到错误。

我在 vuex 配置中可能遗漏了什么？

【问题讨论】：

除非您省略了一些 modules/jobs.js 文件，否则您将丢失模块的导出。
实际上是的，导出丢失了，我刚刚更新了我的问题。我仍然看不到该州的价值。

标签： laravel vue.js

【解决方案1】：

如果您尝试从 jobs.js 模块中获取值，您需要像这样引用它：

this.$store.state.jobs.value

（this 是可选的）

如果您查看Vuex Documents 中的第一个示例 - 最后两行代码是

store.state.a
store.state.b

其中 a 和 b 是模块名称（在您的情况下为作业）

【讨论】：

好吧，所以我用：return this.$store.state.jobs.value;好的，所以它应该始终是 $store，然后是 (state,getters)，模块名称，然后是属性？
是的，除非你使用 mapState 或 mapGetters 帮助器，它允许你映射到一个变量名：...mapState({ value: state => state.jobs.value }) 现在你可以到处调用this.value

【解决方案2】：

this 不应在 html 模板中使用，Vue 自动假定写在括号 {{ }} 内的变量或对象是 this 的属性。

【讨论】：