app. js: 81010 [Vue warn]: ошибка в подключенном хуке: «ReferenceError: $ store не определено» - PullRequest
1 голос
/ 23 марта 2020

Я пытаюсь изменить код для использования vuex. Я получаю 2 ошибки: app. js: 81010 [Vue warn]: ошибка в подключенном хуке: «ReferenceError: $ store не определен» и ReferenceError: $ store не определен. Я думаю, что я правильно импортировал vuex.

Моя цель - обновить таблицу данных bootstrap - vue с данными о сотрудниках из моей базы данных, используя vuex.

В EmployeeDataTable. vue file У меня есть метод getEmployees в methods: {}, который я хотел бы отправить сотруднику по действию fetchAllEmployees. js. fetchAllEmployees должен вытащить всех сотрудников из базы данных и сохранить результат для сотрудников. js employees: [] state.

Я сейчас растерялся и мне нужна помощь в правильном направлении, чтобы решить эту проблему .

Я не знаю, нужно ли мне показывать весь этот код, но я хотел показать поток своих компонентов.

Точка входа Приложение. 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. 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. 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,
};

Приложение. vue:

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

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

<style scoped>

</style>

DashBoard. 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-none{display:none;}

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

    .list-group-item-padding {
        margin-right: 10px;
    }
}
</style>

Компоненты сотрудников. 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>

1 Ответ

2 голосов
/ 23 марта 2020

Используйте 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.

...