Vue 101 od Elmu

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