Web Develpers era: vuex for every one

having small component with single responsibitilties

when persone buys ticket we will emit a buy ticke tevent

and it tells to movie room one ticket sold

it will emit an event to parent movie compoenent

movie ticket event know user need whic h movie, which seeat, whichtimings required

and decreases the amount of available tickets using props

it might emit an event to app comonent

and t passes an event actial ticket o shooping cardt item

this strucutre is fine for small and medium applications

it add cart o sshopomg cart

vuex is state managment library for vue applicaitons

it serves as a centralized data store for all components in an application

instead of changing data directly we canuse vuex before changing data

every change in vuex, it can debuggable means log the things

person move to movie room

boiler tempalte

vue init vueschool/webpack-template shopping-cart

vue init is the initilisation of vue

shopping-cart is the applicationname

add to card and check out

https://github.com/vuejs/vuex

created will cll after the incstance created

import vuex from 'vuex'

vue.use(vuex)

export default new vuex.store({

state:{

products: []

getters:{

productsCount () {}

}

actions:{

fetchProducts () {}

}

mutations:{

setproducts(){}

}

)

vuex mutations

single state change it woudl update products to array

fetch products make responsible for ajax call

setproducts => setting the products and update te products to array

mutitaoion -> simple -> just updating piece of state

actions can be complex it can never update the state

vuex always pass teh state in every paramaers in vuex

state meaans vaaible

some additional paramaters also there it may be payload

so at invidual vue , there is no need od data object anymore because we are storing globally

so required computed property

it will return te product data

we cannout upate directly state

we have to cal mutations to update state

to update mutoation or commit mutation

store.commit('state_name') with payload

store.commit('setproducts',products)

store steate to access the data

store mutation to update teh state

using vuedevtols plugin, we can inspect the vuex tracking

getters are tehe computed properties, we wol mostly at computed only instead of dta baraibles

similary like mutations, in getters functiion

ist parameter is state

second one is pauload

getters:{

availableproducts(state,getters)

{

return state.products.filter(product => product.inventor> 0);

}

computed:{

products () {

return store.getters.availableproducts

}

vuex actions

everywhere ajax call -> we have to call that function if we write at specific vue page

insted that if we arite at vuex, without repeating code, we can cal fetch products

why we write fetch products api at created at indivudal vue, after create instance we have to call products

add to cart

if calls cart ist check product is avaialble or not then add to cart

store.commit => commit to state

if we cal actions -> store.dispatch

actions are asyncrhonous

we need to know when an action is done

so by promise we knowthis

loading is true, once promise resolve loading is false

fetching products with time gap

actions

storea ccess from all components

if we inject at root ,it wil acess from all compoennts

main.js

so removing store from product.list.vue

the global store is availab ewith unde $store

this.$sore.geters.availableproducts

actions example

 addProductToCart(context,product)
    {
        if(product.inventory > 0)
        {
            const cartItem= contect.state.cart.find(item => item.id === product.id)
            if(!cartItem)
            {
                context.commit('pusproducttocart', product)
            } else {
                context.commit('incrementitemquantitiy',cartItem)
            }
            context.commit('decrementProductInventory',product)
        }
    }