DEV Community

loading...

Add Vuex

iarehilton profile image Hilton Meyer Originally published at hiltonmeyer.com on ・1 min read

Code for this can be found in the Github Branch

This is a short one but will lay the foundation for saving ingredients, recipes and any other state of the app.

vue add vuex

Enter fullscreen mode Exit fullscreen mode

Once the package has been installed you should see a new folder called store under src. In main.js the file will also be imported and used by the App. I like to break my modules up in separate folders that hold each store and I name space them but more of this shortly. In the store directory I create a new folder called auth. Within this folder I have 4 files

  • authIndex.js
  • authActions.js
  • authMutation.js
  • authGetters.js

This is probably huge overkill for now but later on and as the project grows it just makes it easier to handle. For now the only files I'll flesh out in authIndex.js

import authActions from './authActions.js';
import authMutations from './authMutations';
import authGetters from './authGetters';

export default {
  namespaced: true,
  state: {},
  mutations: {
    authMutations,
  },
  actions: {
    authActions,
  },
  getters: {
    authGetters,
  },
};

Enter fullscreen mode Exit fullscreen mode

And then import the module into the store/index.js

import { createStore } from 'vuex';

import authModule from './auth/authIndex';

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: { auth: authModule },
});

Enter fullscreen mode Exit fullscreen mode

The skeleton of the store is ready for handling the next thing to tackle which is login and registration of a user. That way we can manage the router paths of what users can do while logged in and also what they can only read when not.

Discussion (0)

Forem Open with the Forem app