Chcete-li to provést ve Vue proti Elm z příkladu aplikace čítače https://ellie-app.com/8kChZLnNmfta1
Pomocí aplikace Elm mount
var app = Elm.Main.init({ node: document.querySelector('main') })
Vue se vytváří vytvořením instance Vue by
new Vue({ render: h => h(App) }).$mount('#app')
Pohled v Elm je funkce, která bere data (také známá jako model).
view model =
div []
[ button
[ onClick Increment ]
[ text "+" ]
, p
[]
[ text <| String.fromInt model ]
, button
[ onClick Decrement ]
[ text "-" ]
]
Při použití Vue jako jediné souborové komponenty používá šablonu tagu.
<template>
<div>
<button @click="increment()">+</button>
<p>{{ count }}</p>
<button @click="decrement()">-</button>
</div>
</template>
Elm musí inicializovat data pomocí init
. a spravovat logiku pomocí funkce aktualizace
init =
0
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
Vue je podobná, s data
a methods
<script>
export default {
data: () => ({
count: 0
}),
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
};
</script>
Co se ale u Elmu liší je, že aktualizace Elm se používají k aktualizaci pohledu pro celou aplikaci, aktualizace Vue pouze pro komponentu. Pokud chcete aktualizovat celou komponentu, budete muset použít vuex
. Pomozte oddělením dat a aktualizací od komponent.
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count += 1
},
decrement(state) {
state.count -= 1
}
}
})
new Vue({
store,
render: h => h(App),
}).$mount('#app')
Poté použijte v komponentě mutační metodu odevzdání.
<script>
export default {
name: "App",
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
increment() {
this.$store.commit("increment");
},
decrement() {
this.$store.commit("decrement");
}
}
};
</script>
Porovnejte stav z ladicího programu stavu
z jilmu
společnosti Vuex