title: app.js:81010 [Vue warn]: Error in mounted hook: "ReferenceError: $store is not defined"
body: <p>I am attempting to refactor my code to use vuex. I am getting 2 errors: app.js:81010 [Vue warn]: Error in mounted hook: "ReferenceError: $store is not defined" and ReferenceError: $store is not defined. I think I imported vuex properly.</p>
  
  <p>My goal is to update my bootstrap-vue data-table with the employee data from my database using vuex.</p>
  
  <p>In the EmployeeDataTable.vue file I have a <code>getEmployees</code> method in <code>methods: {}</code> which I would like it to dispatch the <code>fetchAllEmployees</code> action from employees.js. <code>fetchAllEmployees</code> should grab all of the employees from the database and save the result to the employees.js <code>employees: []</code> state.</p>
  
  <p>I am now confused and need help getting in the right direction to fix this issue.</p>
  
  <p>I don't know if I needed to show all of this code, but I wanted to show the flow of my components.</p>
  
  <p>Entry point App.js:</p>
  
  <pre><code>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,
  });
  </code></pre>
  
  <p>Vuex Store index.js:</p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  import Employees from './modules/employees';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
      modules: {
          Employees,
      }
  });
  </code></pre>
  
  <p>Vuex module employees.js:</p>
  
  <pre><code>const state = {
      employees: [],
      employeesStatus: null,
  };
  
  const getters = {
      allEmployees: (state) =&gt; state.employees
  };
  
  const actions = {
      fetchAllEmployees({commit, state}) {
          commit('setPostsStatus', 'loading');
  
          axios.get('/api/employees')
              .then(res =&gt; {
                  commit('employees', res.data);
                  commit('employeesStatus', 'success');
              })
              .catch(error =&gt; {
                  commit('setEmployeesStatus', 'error');
              });
      },
  };
  
  const mutations = {
      setEmployees(state, employees) {
          state.employees = employees;
      },
      setEmployeesStatus(state, status) {
          state.employeesStatus = status;
      } 
  };
  
  export default {
      state, getters, actions, mutations,
  };
  </code></pre>
  
  <p>App.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: "App"
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>DashBoard.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;b-container&gt;
              &lt;b-row&gt;
                  &lt;b-col class="col-12 col-sm-12 col-md-5 col-lg-4 col-xl-4"&gt;
                      &lt;b-list-group class="d-flex horiz mx-5"&gt;
                          &lt;b-list-group-item class="list-group-item-padding"&gt;
                              &lt;b-link v-on:click="component='home'"&gt;
                                  &lt;i class="fas fa-home"&gt;&lt;/i&gt;
                                  &lt;span class="custom-sm-d-none"&gt;Home&lt;/span&gt;
                              &lt;/b-link&gt;
                          &lt;/b-list-group-item&gt;
                          &lt;b-list-group-item class="list-group-item-padding"&gt;
                              &lt;b-link v-on:click="component = 'projects'"&gt;
                                  &lt;i class="fas fa-project-diagram"&gt;&lt;/i&gt;
                                  &lt;span class="custom-sm-d-none"&gt;Projects&lt;/span&gt;
                              &lt;/b-link&gt;
                          &lt;/b-list-group-item&gt;
                          &lt;b-list-group-item class="list-group-item-padding"&gt;
                              &lt;b-link v-on:click="component = 'employees'"&gt;
                                  &lt;i class="fas fa-user"&gt;&lt;/i&gt;
                                  &lt;span class="custom-sm-d-none"&gt;Employees&lt;/span&gt;
                              &lt;/b-link&gt;
                          &lt;/b-list-group-item&gt;
                          &lt;b-list-group-item class="list-group-item-padding"&gt;
                              &lt;b-link v-on:click="component = 'customers'"&gt;
                                  &lt;i class="fas fa-users"&gt;&lt;/i&gt;
                                  &lt;span class="custom-sm-d-none"&gt;Customers&lt;/span&gt;
                              &lt;/b-link&gt;
                          &lt;/b-list-group-item&gt;
                          &lt;b-list-group-item class="list-group-item-padding"&gt;
                              &lt;b-link v-on:click="component = 'batch-create-material-list'"&gt;
                                  &lt;i class="fas fa-toolbox"&gt;&lt;/i&gt;
                                  &lt;span class="custom-sm-d-none"&gt;Materials&lt;/span&gt;
                              &lt;/b-link&gt;
                          &lt;/b-list-group-item&gt;
                          &lt;b-list-group-item class=""&gt;
                              &lt;b-link v-on:click="component = 'product-list'"&gt;
                                  &lt;i class="fas fa-clipboard-list icon-5x"&gt;&lt;/i&gt;
                                  &lt;span class="custom-sm-d-none"&gt;Tasks&lt;/span&gt;
                              &lt;/b-link&gt;
                          &lt;/b-list-group-item&gt;
                      &lt;/b-list-group&gt;
                  &lt;/b-col&gt;
                  &lt;b-col class="col-12 col-md-7 col-lg-8 col-xl-8"&gt;
                      &lt;keep-alive&gt;
                          &lt;component v-bind:is="component"&gt;&lt;/component&gt;
                      &lt;/keep-alive&gt;
                  &lt;/b-col&gt;
              &lt;/b-row&gt;
          &lt;/b-container&gt;
      &lt;/div&gt;       
  &lt;/template&gt;
  
  &lt;script&gt;
  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',
          }
      },
  
  
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  /* 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;
      }
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Component Employees.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;EmployeeDataTable/&gt;
          &lt;CreateEmployee /&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import EmployeeDataTable from "./EmployeeDataTable"
  import CreateEmployee from "./CreateEmployee"
  
  export default {
      components: {
        EmployeeDataTable,
        CreateEmployee,  
      },
  
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Component EmployeeDataTable.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="overflow-auto pb-3" style="background: white; "&gt;
          &lt;b-card
          header="Employees"
          header-tag="header"
          &gt;
              &lt;b-pagination
              v-model="currentPage"
              :total-rows="rows"
              :per-page="perPage"
              aria-controls="my-table"
              &gt;&lt;/b-pagination&gt;
  
              &lt;p class="mt-3"&gt;Current Page: {{ currentPage }}&lt;/p&gt;
  
              &lt;b-table
              id="employee-table"
              ref="employee-table"
              :items="items"
              :per-page="perPage"
              :current-page="currentPage"
              small
              &gt;&lt;/b-table&gt;
          &lt;/b-card&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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(() =&gt; {
              console.log('Dispatched getEmployees method!');
            });
          }
      },
      mounted() {
          this.getEmployees();
      }
    }
  &lt;/script&gt;
  </code></pre>