Setting up vuex in laravel application 2020

Setting up vuex in laravel application 2020

Setting up vuex in laravel application 2020



This one is a advanced guide, And will explain you steps to setup vuex in your Laravel and Vuejs application. Before begin i assume you have a laravel project where you already have vue components being used. And you want to extend the application by adding Vuex into the application. So let’s get started.





Installing Vuex in laravel and vuejs app

So you need to run this command to install vuex in the project



//assuming Vue js 2x
npm install vuex --save

This will installed latest vuex package to your project.





Creating files and folders

In our app we have Vuejs components arranged something like this



Image 1.1

Ok so in “resources/js/components” we have all our vuejs components. And next to components folder we have store directory. So create store folder in same directory “resource/js/store”. Now in this directory create a file index.js . And also create a directory “resource/js/store/modules”.





About Module

Let’s say you are creating an Todo application. So module file should be “modules/todos.js”. And in this file we are going to write all methods for todo functionality.



If you followed above mentioned steps you must be having “index.js” file. in your “store” directory. Open this file using code editor and add this code





//Importing Vuex
import Vuex from 'vuex';
// Importing Vue
import Vue from 'vue';

// This is module file we are importing
import notes from './modules/todos';


//load Vuex in vue app
Vue.use(Vuex)


// Exporting our module
export default new Vuex.Store({
   modules: {
       notes
   }
});

Binding Vuex to vuejs

So our “index.js” file is looking good. Now it is time to call it in main js file. In our laravel application we have “resources/js/app.js”. We need to import “index.js” in this file.



//Calling Vuex store
import store from './store'

// Calling store in Vue instance
const app = new Vue({
    el: '#app',
    store,
    router,
});

Working with module file

let’s add some code in our “modules/todos.js” file.





// state having some demo data
const state = {
    notes:[
        {
            id:1,
            title:'Title One'
        },
        {
            id:2,
            title: 'Title Two'
        }
    ]
};

//getters set data to allTodos and we can call this //"allTodos" in component file
const getters = {
    allTodos: (state) => state.notes
};

const actions = {};
const mutations = {};

export default{
    state,
    getters,
    actions,
    mutations
}

In above code we have some sdemo data that we are setting using getters to variable “allTodos”. Now this variable can be called in any vuejs component in our project just do can it like this.



In your Component





// Importing getters from vuex
import { mapGetters } from 'vuex';

export default {
    data() {
         return {
          }
  },
  props:[''],
  computed:mapGetters(['allTodos']),
}

Now we can use “allTodos” in our vue template.
like this



{{allTodos}}

It should print content. That’s it Vuex is successfully working in your application.










%d bloggers like this: