src/store/index.js
state variables
mutations ->fuinctions
actions:{}
modules:{}
getters:{} gettuing when loads
store this.$store.state.products
import { mapState, mapGetters } from "vuex";
this.$store.commit("addCategories", items);
let app_settings = this.$store.getters.getAppSetting();
computed:{
app_settings_ready() {
let app_settings = this.$store.getters.getAppSetting();
if ($cookies.isKey('user') && Object.keys(app_settings).length === 0){
return false;
} else {
return true;
}
}
},
computed: {
...mapState({
isDeliveryChoice: state => state.isDeliveryChoice,
vouchersList: state => state.vouchers
}),
...mapState({
categories : state => state.categories,
products: state => state.products,
product: state => state.selected_half_pizza[0].prod,
productb:state => state.selected_half_pizza[1].prod
}),
...mapGetters([
'cartItems'
]),
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
categories: [],
products: [],
pincode: null,
pincodes: [],
activeCategory: null,
cart: [],
dealCart: [],
savedDealCart: [],
selected_pizza: null,
isChoiceSelected: false,
isDeliveryChoice: true,
hasGrabDeal: false,
drinkOptions: {},
appliedVoucher: {},
vouchers: [],
selected_half_pizza:[],
},
mutations: {
addCategories(state, items) {
state.categories = items;
},
addProducts(state, items) {
state.products = items;
},
setActiveCategory(state, category) {
state.activeCategory = category;
},
setPincode(state, pincode) {
state.pincode = pincode;
localStorage.setItem('location', pincode);
},
setVouchers(state, data) {
state.vouchers = data;
},
setPincodeList(state, pincodes) {
state.pincodes = pincodes;
localStorage.setItem('pincodes', pincodes);
},
addToCart(state, item) {
state.cart.push(item);
let cart = JSON.stringify(state.cart);
localStorage.setItem('cart', cart);
},
addToDealCart(state, item) {
state.dealCart.push(item);
},
updateDealCart(state, items) {
state.dealCart = [];
state.dealCart = items;
},
setSavedDealCart(state, item) {
state.savedDealCart.push(item);
state.dealCart = [];
let cart = JSON.stringify(state.savedDealCart);
localStorage.setItem('dealCart', cart);
},
updateSavedDealCart(state, items) {
state.savedDealCart = items;
let cart = JSON.stringify(state.savedDealCart);
localStorage.setItem('dealCart', cart);
},
updateCart(state, items) {
state.cart = items;
let cart = JSON.stringify(state.cart);
localStorage.setItem('cart', cart);
},
setPizzaSelection(state, item) {
state.selected_pizza = item;
},
setHalfPizzaSelection(state, item) {
state.selected_half_pizza = '';
state.selected_half_pizza = item;
},
setChoice(state, value) {
state.isChoiceSelected = true;
state.isDeliveryChoice = value;
},
grabDeal(state, value) {
state.hasGrabDeal = value;
},
syncCart(state) {
if (localStorage.hasOwnProperty('cart')) {
let cart = localStorage.getItem('cart')
state.cart = JSON.parse(cart);
}
if (localStorage.hasOwnProperty('dealCart')) {
let dealCart = localStorage.getItem('dealCart')
state.savedDealCart = JSON.parse(dealCart);
}
},
setDrinksOptions(state, value) {
state.drinkOptions = value;
},
setAppliedVoucher(state, value) {
state.appliedVoucher = value;
}
},
actions: {},
modules: {},
getters: {
cartItems: state => {
if (state.cart.length > 0) {
return state.cart;
} else if (localStorage.hasOwnProperty('cart')) {
let cart = localStorage.getItem('cart')
return JSON.parse(cart);
} else {
return state.cart;
}
}
}
});
store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
my_queue:[],
submit_queue:[],
app_settings:{},
},
getters:{
getMyQueue: (state) => (index = null) => {
if (index === null){
return state.my_queue;
} else {
return state.my_queue[index];
}
},
getMyQueueLength: (state) => {
return state.my_queue.length;
},
getSubmitQueue: (state) => (index = null) => {
if (index === null){
return state.submit_queue;
} else {
return state.submit_queue.index;
}
},
getSubmitQueueLength: (state) => {
return state.submit_queue.length;
},
getAppSetting: (state) => (group_name = null, setting_name = null, default_value = null) => {
if (group_name === null) {
return state.app_settings
} else if (group_name != null && setting_name === null){
if (state.app_settings.hasOwnProperty(group_name)){
return state.app_settings.group_name;
} else {
return null;
}
} else if (group_name != null && setting_name != null) {
if (state.app_settings.hasOwnProperty(group_name)) {
let app_setting = state.app_settings[group_name].find(({ name }) => name == setting_name)
if (app_setting) {
if (app_setting.app_settings_fields.type == "json") {
return JSON.parse(app_setting.value);
} else {
return app_setting.value;
}
} else if (default_value !== null) {
return default_value;
} else {
return null;
}
} else if (default_value !== null) {
return default_value;
}
}
}
},
mutations: {
addToMyQueueAtBegin(state, assignment){
let existing_assignment = state.my_queue.find(my_queue_assignment => my_queue_assignment.id == assignment.id);
if (!existing_assignment) {
state.my_queue.unshift(assignment);
}
},
addToMyQueueAtEnd(state, assignment){
let existing_assignment = state.my_queue.find(my_queue_assignment => my_queue_assignment.id == assignment.id);
if (!existing_assignment) {
state.my_queue.push(assignment);
}
},
removeFromMyQueue(state, assignment){
state.my_queue.forEach((my_queue_assignment, index) => {
if(assignment.id == my_queue_assignment.id){
state.my_queue.splice(index,1);
}
})
},
emptyMyQueue(state){
state.my_queue = [];
},
addToSubmitQueueAtBegin(state, assignment){
state.submit_queue.unshift(assignment);
},
addToSubmitQueueAtEnd(state, assignment){
state.submit_queue.push(assignment);
},
removeFromSubmitQueue(state, assignment){
state.submit_queue.forEach((my_queue_assignment, index) => {
if(assignment.id == my_queue_assignment.id){
state.submit_queue.splice(index,1);
}
})
},
reset(state){
state.my_queue = [];
state.submit_queue = [];
},
setAppSettings(state, app_settings) {
state.app_settings = app_settings;
}
}
});
let app_settings = this.$store.getters.getAppSetting();
this.$store.commit('setAppSettings', app_settings_data);
UKPIZZAWEB
INDEX.JS
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
categories: [],
products: [],
pincode: null,
pincodes: [],
activeCategory: null,
cart: [],
dealCart: [],
savedDealCart: [],
selected_pizza: null,
isChoiceSelected: false,
isDeliveryChoice: true,
hasGrabDeal: false,
drinkOptions: {},
appliedVoucher: {},
vouchers: [],
selected_half_pizza:[],
},
mutations: {
addCategories(state, items) {
state.categories = items;
},
addProducts(state, items) {
state.products = items;
},
setActiveCategory(state, category) {
state.activeCategory = category;
},
setPincode(state, pincode) {
state.pincode = pincode;
localStorage.setItem('location', pincode);
},
setVouchers(state, data) {
state.vouchers = data;
},
setPincodeList(state, pincodes) {
state.pincodes = pincodes;
localStorage.setItem('pincodes', pincodes);
},
addToCart(state, item) {
state.cart.push(item);
let cart = JSON.stringify(state.cart);
localStorage.setItem('cart', cart);
},
addToDealCart(state, item) {
state.dealCart.push(item);
},
updateDealCart(state, items) {
state.dealCart = [];
state.dealCart = items;
},
setSavedDealCart(state, item) {
state.savedDealCart.push(item);
state.dealCart = [];
let cart = JSON.stringify(state.savedDealCart);
localStorage.setItem('dealCart', cart);
},
updateSavedDealCart(state, items) {
state.savedDealCart = items;
let cart = JSON.stringify(state.savedDealCart);
localStorage.setItem('dealCart', cart);
},
updateCart(state, items) {
state.cart = items;
let cart = JSON.stringify(state.cart);
localStorage.setItem('cart', cart);
},
setPizzaSelection(state, item) {
state.selected_pizza = item;
},
setHalfPizzaSelection(state, item) {
state.selected_half_pizza = '';
state.selected_half_pizza = item;
},
setChoice(state, value) {
state.isChoiceSelected = true;
state.isDeliveryChoice = value;
},
grabDeal(state, value) {
state.hasGrabDeal = value;
},
syncCart(state) {
if (localStorage.hasOwnProperty('cart')) {
let cart = localStorage.getItem('cart')
state.cart = JSON.parse(cart);
}
if (localStorage.hasOwnProperty('dealCart')) {
let dealCart = localStorage.getItem('dealCart')
state.savedDealCart = JSON.parse(dealCart);
}
},
setDrinksOptions(state, value) {
state.drinkOptions = value;
},
setAppliedVoucher(state, value) {
state.appliedVoucher = value;
}
},
actions: {},
modules: {},
getters: {
cartItems: state => {
if (state.cart.length > 0) {
return state.cart;
} else if (localStorage.hasOwnProperty('cart')) {
let cart = localStorage.getItem('cart')
return JSON.parse(cart);
} else {
return state.cart;
}
}
}
});
cart.vue
import { mapState, mapGetters } from "vuex";
onRemoveVoucher() {
this.$store.commit("setAppliedVoucher", {});
},
computed: {
...mapState({
categories : state => state.categories,
products: state => state.products,
dealCart: state => state.dealCart,
savedDealCart: state => state.savedDealCart,
hasGrabDeal: state => state.hasGrabDeal,
appliedVoucher: state => state.appliedVoucher,
isDeliveryChoice: state => state.isDeliveryChoice,
vouchers: state => state.vouchers
}),
...mapGetters([
'cartItems'
]),
mapstate -> variables in vuex
mapgettss=> function in getters in vuex
if we write like above in cart.vue, there is no need of declaring variables in vuejs in return
cartPrice() {
let price = 0;
this.cartItems.forEach(item => {
price += this.getPrice(item);
});
return price;
},
this.axios.post(this.$end_point + 'grab-deal', {payload: this.dealCart}, headers).then((response) => {
s
state,mutatuins,actions,modules,getters which one wil call first
In Vuex, the order of execution typically follows this sequence:
State: The state represents the centralized data store in Vuex. It holds the application's data that needs to be shared across components. The state is accessed by components using getters or directly via this.$store.state. The state is available from the beginning and can be accessed before any other Vuex feature.
Getters: Getters are used to retrieve and compute derived state from the store's state. They provide a way to access and transform the state in a reusable manner. Getters are accessed by components using mapGetters helper or directly via this.$store.getters. Getters can be considered as computed properties for the store's state.
Mutations: Mutations are responsible for modifying the state in a synchronous manner. They are the only way to change the state in Vuex. Mutations are committed from components using commit method, and they should not perform any asynchronous operations. Mutations modify the state directly and are executed sequentially in the order they are committed.
Actions: Actions handle asynchronous operations and can be used to commit mutations. They are triggered from components using the dispatch method. Actions can contain logic, make API calls, and perform other asynchronous tasks. Inside actions, you can call mutations using commit to modify the state. Actions are useful for handling complex business logic and coordinating multiple mutations.
Modules: Vuex allows you to organize your store into modules. Modules have their own state, mutations, actions, and getters, allowing for a modular and scalable store structure. The order of execution within a module follows the same sequence: state, getters, mutations, and actions. Each module can have its own state, mutations, actions, and getters, which are combined together to form the root store.
To summarize, the order of execution is as follows: state, getters, mutations, actions, and modules. However, it's important to note that state, getters, mutations, and actions are separate concepts in Vuex, and they can be used independently based on your application's requirements.
No comments:
Post a Comment