Skip to content

Instantly share code, notes, and snippets.

Avatar

Nosa Obaseki c0depanda

View GitHub Profile
View longpress-directive.js
Vue.directive('longpress', {
bind: function (el, binding, vNode) {
// Make sure expression provided is a function
if (typeof binding.value !== 'function') {
// Fetch name of component
const compName = vNode.context.name
// pass warning to console
let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be`
if (compName) { warn += `Found in component '${compName}' ` }
View mainstore.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import cart from './modules/cart'
Vue.use(Vuex)
View cart.js
// import Vue
import Vue from 'vue';
export default {
state: {
cart: ["bread", "rice", "beans", "turkey"]
},
getters: {
// Fetch the total number of items in the cart
View finalstore.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
View example5.vue
<template>
<main>
<h1>Cart Content</h1>
<p>Total Number of Items: {{totalNumberOfCartItems}}</p>
<form @submit.prevent="addItemToCart">
<input type="text" v-model="item" required>
<button type="submit">Add to cart</button>
</form>
<button type="button" @click="checkout">Checkout</button>
View store.js
// import Vue
import Vue from 'vue';
// import Vuex
import Vuex from 'vuex';
// Install the Vuex plugin on vue
Vue.use(Vuex);
// create a Vuex store instance
export const store = new Vuex.Store({
View store.js
// import Vue
import Vue from 'vue';
// import Vuex
import Vuex from 'vuex';
// Install the Vuex plugin on vue
Vue.use(Vuex);
// create a Vuex store instance
export const store = new Vuex.Store({
View example5.vue
<template>
<main>
<h1>Cart Content</h1>
<p>Total Number of Items: {{totalNumberOfCartItems}}</p>
<form @submit.prevent="addItemToCart">
<input type="text" v-model="item" required>
<button type="submit">Add to cart</button>
</form>
<button type="button" @click="checkout">Checkout</button>
View example4.vue
<template>
<main>
<h1>Cart Content</h1>
<p>Total Number of Items: {{totalNumberOfCartItems}}</p>
<form @submit.prevent="addItemToCart">
<input type="text" v-model="item" required>
<button type="submit">Add to cart</button>
</form>
</main>
</template>
View store.js
// import Vue
import Vue from 'vue';
// import Vuex
import Vuex from 'vuex';
// Install the Vuex plugin on vue
Vue.use(Vuex);
// create a Vuex store instance
export const store = new Vuex.Store({