switchon@lavalamp.biz
australia flag +61(0) 42 420 8911
south africa flag +27(0) 21 036 1165
Application & software development
Get A Quote

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact
switchon@lavalamp.biz
Get A Quote

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact

  • Home
  • Services
    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI / UX design & consulting
    • Recruitment services
    • Lease an expert
  • About
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact
difference between screen size, resolution and display size
Difference Between Screen Size, Resolution And Display Size
September 8, 2020
upskilling is the key to moving forward
Upskilling Is The Key To Moving Forward
September 21, 2020

Integrating Vuex Into Your Laravel Vue Application

intergrating vuex in laravel and vue application
intergrating vuex in laravel and vue application

Firstly what is Vuex?


Well the text book definition would be:
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.



What does that mean?


Well every application has State which is information your program manipulates to accomplish some task. It is data or information that gets changed or manipulated throughout the runtime of a program, and vuex manages that state for you in a fashion thats easy to understand and is predictable.



Cool, but why should I use it?


Thats a good question, you could defiantly use emit or a central service to do the same thing, but you will realise quickly as your application grows, things become really messy fast and difficult to manage all at once, and Vuex takes care of all of that for you.

Great so we got that out the way lets look into setting it up.



Installation


start simply by navigating to your project directory in terminal or prompt, and inserting the following line.

npm install vuex --save

then import Vuex under your Vue import

Now We want to setup our store, where we will keep all of our mutators, actions, state, and getters, but wait what are those?

So state is a object of all the variables that we will parse around our application.

getters are methods that get information/data.

mutators are methods that mutate the state, in other words change data,

and actions are methods that do something, like an http request or can call a mutation asynchronously.

so this is what our store can look like

You will notice we have a property thats called modules, and this is an object where we can modularise a section to a specific component, such as AddToCart or ShoppingList.

Now import this store and use it in the Vue instance.

Now we can make our state, getters, mutators and actions objects.

state:

getters:

mutators:

actions:

And there you go vuex is setup now we can just use it thoughtout our application by simply going into a component, make a computed method and called the store with


computed:{
 getUser(){
  return this.$store.getters.getUser
 }
},
methods:{
 addUser(username){
  this.$store.dispatch('addUser', username:username);
 }
}

Then just call it in the template file with

{{getUser}}

Contact us


    Related posts:

    dynamic doughnut graph using laravel vue componentDynamic Doughnut Graph Using Laravel Vue Component angularUpdating A Primitive Type Variable From A Service In Angular laravel livewireLaravel Livewire how to implement a cropper tools in your frontend vue applicationHow To Implement A Cropper Tool In Your Frontend Vue Application
    Share
    99
    Mitchell Yuen
    Mitchell Yuen

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    lava lamp lab secondary logo white

    Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment


    lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

    Services

    • Application & software development
    • Outsourced software development
    • Project based resourcing
    • Digital marketing & consulting
    • Graphic design & consulting
    • UI/UX design & consulting
    • Recruitment services
    • Lease an expert

    Contact Us

    south africa+27(0) 83 419 4851

    south africa+27(0) 21 036 1165

    australia+61(0) 42 420 8911


    switchon@lavalamp.biz


    Lava Lamp Lab,
    Unit 1 Monaco Square, 14 Church Street, Durbanville, Cape Town, 7550

    NBConsult Group

    nbconsult
    designer needed
    © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
        Business Automation

        Business-specific workflows assist our clients with Disaster recovery, time tracking and invoice generation, to mention a few. If you choose to outsource your enterprise app development, we work with you to understand your business and assist to deliver automation for great business efficiency.

        eCommerce Solutions

        We are industry experts in Fintech and eCommerce, Lava Lamp Lab will help you with custom software development to provide you with the quality software services for creating online shops, Fintech mobile apps and web presence for your business of any size, allowing you to engage, sell, support and collect payments.

        Startup & Innovation

        Lava Lamp Lab believes in helping you grow your idea into a business. Our team has provided outsourced services to multiple tech start-ups and investors over the last decade, delivering innovative solutions. We have been trusted over other software development companies to build their entire technology stack.

        Data Mining

        Key to any business is the processing of websites and social network APIs, aligning the information gathered to information collected from internal enterprise systems. This big data can be rendered on reporting dashboards to create Business Intelligence. You can entrust Lava Lamp Lab to reliably deliver on this.

        Contact us now

          Application & software development

            Outsourced software development

              Project based resourcing

                Digital marketing & consulting

                  Graphic design & consulting

                    UI/UX design & consulting

                      Lease an expert

                        Recruitment services

                          We are using cookies to give you the best experience on our website.

                          You can find out more about which cookies we are using or switch them off in .

                          Lava Lamp Lab
                          Powered by  GDPR Cookie Compliance
                          Privacy Overview

                          This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                          Strictly Necessary Cookies

                          Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                          If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                          3rd Party Cookies

                          This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                          Keeping this cookie enabled helps us to improve our website.

                          Please enable Strictly Necessary Cookies first so that we can save your preferences!

                          Cookie Policy

                          More information about our Cookie Policy