app.js:81010 [Vue 警告]：挂载钩子错误：“ReferenceError: $store 未定义”

Posted 2023-02-22

【中文标题】app.js:81010 [Vue 警告]：挂载钩子错误：“ReferenceError: $store 未定义”

【英文标题】：app.js:81010 [Vue warn]: Error in mounted hook: "ReferenceError: $store is not defined"

【发布时间】：2020-07-03 12:03:18

【问题描述】：

我正在尝试重构我的代码以使用 vuex。我收到 2 个错误：app.js:81010 [Vue 警告]：挂载钩子中的错误：“ReferenceError：$store 未定义”和 ReferenceError：$store 未定义。我想我正确地导入了 vuex。

我的目标是使用 vuex 使用我的数据库中的员工数据更新我的 bootstrap-vue 数据表。

在 EmployeeDataTable.vue 文件中，我在 methods: 中有一个 getEmployees 方法，我希望它从 employees.js 中调度 fetchAllEmployees 操作。 fetchAllEmployees 应该从数据库中获取所有员工并将结果保存到 employees.js employees: [] 状态。

我现在很困惑，需要帮助找到正确的方向来解决这个问题。

我不知道我是否需要展示所有这些代码，但我想展示我的组件的流程。

入口点 App.js：

import Vue from 'vue';
import store from './store';
import router from './router';
import  BootstrapVue, IconsPlugin  from 'bootstrap-vue'

import App from './components/App';


Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

require('./bootstrap');

const app = new Vue(
    el: '#app',

    components: 
        App,
    ,

    router,

    store,
);

Vuex 商店 index.js：

import Vue from 'vue';
import Vuex from 'vuex';
import Employees from './modules/employees';

Vue.use(Vuex);

export default new Vuex.Store(
    modules: 
        Employees,
    
);

Vuex 模块 employees.js：

const state = 
    employees: [],
    employeesStatus: null,
;

const getters = 
    allEmployees: (state) => state.employees
;

const actions = 
    fetchAllEmployees(commit, state) 
        commit('setPostsStatus', 'loading');

        axios.get('/api/employees')
            .then(res => 
                commit('employees', res.data);
                commit('employeesStatus', 'success');
            )
            .catch(error => 
                commit('setEmployeesStatus', 'error');
            );
    ,
;

const mutations = 
    setEmployees(state, employees) 
        state.employees = employees;
    ,
    setEmployeesStatus(state, status) 
        state.employeesStatus = status;
     
;

export default 
    state, getters, actions, mutations,
;

App.vue：

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default 
        name: "App"
    
</script>

<style scoped>

</style>

仪表板.vue：

<template>
    <div>
        <b-container>
            <b-row>
                <b-col class="col-12 col-sm-12 col-md-5 col-lg-4 col-xl-4">
                    <b-list-group class="d-flex horiz mx-5">
                        <b-list-group-item class="list-group-item-padding">
                            <b-link v-on:click="component='home'">
                                <i class="fas fa-home"></i>
                                <span class="custom-sm-d-none">Home</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item class="list-group-item-padding">
                            <b-link v-on:click="component = 'projects'">
                                <i class="fas fa-project-diagram"></i>
                                <span class="custom-sm-d-none">Projects</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item class="list-group-item-padding">
                            <b-link v-on:click="component = 'employees'">
                                <i class="fas fa-user"></i>
                                <span class="custom-sm-d-none">Employees</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item class="list-group-item-padding">
                            <b-link v-on:click="component = 'customers'">
                                <i class="fas fa-users"></i>
                                <span class="custom-sm-d-none">Customers</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item class="list-group-item-padding">
                            <b-link v-on:click="component = 'batch-create-material-list'">
                                <i class="fas fa-toolbox"></i>
                                <span class="custom-sm-d-none">Materials</span>
                            </b-link>
                        </b-list-group-item>
                        <b-list-group-item class="">
                            <b-link v-on:click="component = 'product-list'">
                                <i class="fas fa-clipboard-list icon-5x"></i>
                                <span class="custom-sm-d-none">Tasks</span>
                            </b-link>
                        </b-list-group-item>
                    </b-list-group>
                </b-col>
                <b-col class="col-12 col-md-7 col-lg-8 col-xl-8">
                    <keep-alive>
                        <component v-bind:is="component"></component>
                    </keep-alive>
                </b-col>
            </b-row>
        </b-container>
    </div>       
</template>

<script>
import Home from '../../components/admin/Home';
import Projects from '../../components/admin/Projects';
import Employees from '../../components/admin/Employees';
import Customers from '../../components/admin/Customers'
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';


export default 
    name: 'Dashboard',

    components: 
        'home': Home,
        'projects': Projects,
        'employees': Employees,
        'customers': Customers,
        'product-list': ProductList,
        'batch-create-material-list': CreateProductAndCategory,

    ,

    data() 
        return 
            component: 'product-list',
        
    ,



</script>

<style scoped>
/* small screen  below 768px width */
@media only screen and (max-width : 691px)  
    .custom-sm-d-nonedisplay:none;

    .horiz 
        flex-direction: row;
        justify-content: space-evenly;
        padding-bottom: 10px;
    

    .list-group-item-padding 
        margin-right: 10px;
    

</style>

组件Employees.vue：

<template>
    <div>
        <EmployeeDataTable/>
        <CreateEmployee />
    </div>
</template>

<script>
import EmployeeDataTable from "./EmployeeDataTable"
import CreateEmployee from "./CreateEmployee"

export default 
    components: 
      EmployeeDataTable,
      CreateEmployee,  
    ,


</script>

<style scoped>

</style>

组件EmployeeDataTable.vue：

<template>
    <div class="overflow-auto pb-3" style="background: white; ">
        <b-card
        header="Employees"
        header-tag="header"
        >
            <b-pagination
            v-model="currentPage"
            :total-rows="rows"
            :per-page="perPage"
            aria-controls="my-table"
            ></b-pagination>

            <p class="mt-3">Current Page:  currentPage </p>

            <b-table
            id="employee-table"
            ref="employee-table"
            :items="items"
            :per-page="perPage"
            :current-page="currentPage"
            small
            ></b-table>
        </b-card>
    </div>
</template>

<script>
import  mapGetters  from 'vuex';

  export default 
    name: "EmployeeDataTable",

    data() 
      return 
        perPage: 3,
        currentPage: 1,
        items: [],
      
    ,
    computed: 
      ...mapGetters(['allEmployees']),

      rows() 
        return this.items.length
      
    ,
    methods: 
        getEmployees() 
          $store.dispatch('fetchAllEmployees').then(() => 
            console.log('Dispatched getEmployees method!');
          );
        
    ,
    mounted() 
        this.getEmployees();
    
  
</script>

【问题讨论】：

this.$store 改为

@Dan 使用 this 确实有效。我确实在 devtools 网络选项卡中看到了从数据库返回的数据。然而，我仍然试图围绕吸气剂和突变概念。我知道执行了 fetchAllEmployees，但是在我的 vuex devtools 中，我没有看到 allEmployees 状态部分填充了数据库数据。

@丹。我知道我哪里出错了。我的承诺是错误的。我需要使用commit('setEmployees', res.data);

【参考方案1】：

在组件中使用this.$store 而不是$store。将您的 API 调用更改为：

axios.get('/api/employees')
  .then(res => 
    commit('setEmployees', res.data);
    commit('setEmployeesStatus', 'success');
  )
  .catch(error => 
    commit('setEmployeesStatus', 'error');
  );

现在的不同之处在于您正在调用突变名称。在您的成功提交中，您使用的是状态名称而不是突变。

人们在 Vuex 中使用的一个常见约定是在所有大写字母中命名突变，它可能在这种情况下有所帮助（如果您使用状态名称代替它，它会更明显）。您可以将它们重命名为 SET_EMPLOYEES 和 SET_EMPLOYEES_STATUS。