Browse Source

simpler store

master
pvincent 4 years ago
parent
commit
8001048968
  1. 14
      .vscode/settings.json
  2. 2
      src/components/App.vue
  3. 46
      src/components/Basket.vue
  4. 24
      src/stores/global.ts
  5. 2
      tsconfig.json

14
.vscode/settings.json

@ -9,16 +9,6 @@
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"cSpell.enableFiletypes": ["markdown", "!typescript", "!json"],
"cSpell.words": [
"Astrologia",
"Codium",
"Dolibarr's",
"Kamal",
"Kamalātmikā",
"Yantra",
"protovue",
"tmik",
"windi"
]
"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true
}

2
src/components/App.vue

@ -31,7 +31,7 @@
<script lang="ts">
import { defineComponent } from 'vue'
import Basket from '@/components/Basket.vue'
import Basket from './Basket.vue'
declare const APP_TITLE: string,
APP_VERSION: string,
APP_REPOSITORY: string,

46
src/components/Basket.vue

@ -3,30 +3,28 @@
<div>
<button
class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
@click="inc1"
@click="addProduct"
>
order product n°{{ products }}
order product n°{{ data.products }}
</button>
<button
class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
@click="price++"
@click="data.price++"
>
inc price {{ price }}
inc price {{ data.price }}
</button>
<button
class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
@click="decPrice"
>
dec price {{ price }}
dec price {{ data.price }}
</button>
</div>
<p>
TOTAL HT = {{ global.state.count }} <br />
TOTAL TTC = {{ global.getters.ttc.value }}
</p>
<p>TOTAL HT = {{ state.count }} <br /></p>
<p>TOTAL HT = {{ ttc }} <br /></p>
<button
class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
@click="global.actions.reset()"
@click="reset"
>
RESET
</button>
@ -34,24 +32,28 @@
<script lang="ts">
import global from '@/stores/global'
import { defineComponent, ref } from 'vue'
import { defineComponent, reactive } from 'vue'
export default defineComponent({
props: {
msg: { type: String, required: true }
},
setup() {
const products = ref(1)
const price = ref(5)
return { products, price, global }
},
methods: {
inc1() {
this.products++
global.actions.inc(this.price)
},
decPrice() {
if (this.price > 1) this.price--
const data = reactive({
products: 1,
price: 10
})
const { state, ttc, inc, reset } = global
function decPrice() {
if (data.price > 1) data.price--
}
const addProduct = () => {
data.products++
inc(data.price)
}
return { data, state, ttc, reset, decPrice, addProduct }
}
})
</script>

24
src/stores/global.ts

@ -1,24 +1,24 @@
import { computed, reactive, readonly } from "vue"
import { computed, reactive, readonly } from 'vue'
//CONSTANTS
const TVA = 8.5
//STATE
const state = reactive({
count: 0,
count: 0
})
const ttc = computed(
() => state.count * 1.085
)
//COMPUTED
const ttc = computed(() => (state.count * (100 + TVA)) / 100)
//ARROW FUNCTION
const inc = (amount: number): number => {
return (state.count += amount)
return (state.count += amount)
}
//STANDARD FUNCTION
function reset(): number {
return state.count = 0
return (state.count = 0)
}
export default {
state: readonly(state),
getters: { ttc },
actions: { inc, reset }
}
export default { state: readonly(state), ttc, inc, reset }

2
tsconfig.json

@ -8,8 +8,8 @@
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"noEmit": true,
"baseUrl": ".",
"strict": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}

Loading…
Cancel
Save