Vue 101 จาก Elm

หากจะทำแบบนี้ใน Vue โดยเทียบกับ Elm จากตัวอย่าง counter app https://ellie-app.com/8kChZLnNmfta1

Elm mount app โดยใช้

var app = Elm.Main.init({ node: document.querySelector('main') })

Vue ก็ทำโดยสร้าง Vue instance โดย

new Vue({ render: h => h(App) }).$mount('#app')

view ใน Elm เป็น function ที่รับ data (หรือเรียกว่า Model)

view model =
    div []
        [ button
            [ onClick Increment ]
            [ text "+" ]
        , p
            []
            [ text <| String.fromInt model ]
        , button
            [ onClick Decrement ]
            [ text "-" ]
        ]

ใช้ Vue แบบ single file component จะใช้ tag template

<template>
  <div>
    <button @click="increment()">+</button>
    <p>{{ count }}</p>
    <button @click="decrement()">-</button>
  </div>
</template>

Elm ต้อง initialize data ผ่าน init และ manage logic ด้วย update function

init =
    0


update msg model =
    case msg of
        Increment ->
            model + 1

        Decrement ->
            model - 1

ส่วน Vue ก็คล้ายกันโดยมี data และ methods

<script>
export default {
  data: () => ({
    count: 0
  }),
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
};
</script>

แต่สิ่งที่มันต่างกับ Elm คือ update ของ Elm ใช้ update view ทั้ง application ส่วน Vue update เพียงแค่ใน component ถ้าอยากจะให้ update ทั้ง component ต้องใช้ vuex ช่วยโดยแยก data และการ update ออกมาจาก component

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')

จากนั้นใช้วิธีการ commit mutation เข้าไปจากใน component

<script>
export default {
  name: "App",
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    },
    decrement() {
      this.$store.commit("decrement");
    }
  }
};
</script>

ลองเทียบ state จาก state debugger

ของ Elm

ของ Vuex