Nuxt.js Fundamental ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store

เนื้อหาของบทเรียน Nuxt.js

• ตอนที่ 1 - Getting Started with Nuxt.js
• ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app
• ตอนที่ 3 - การกำหนด Routing
• ตอนที่ 4 - Nuxt.js Concept
• ตอนที่ 5 - Nuxt Content และ Async Data
• ตอนที่ 6 - การดึงข้อมูลจาก APIs
• ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store
• ตอนที่ 8 - ทำระบบ Authentication ด้วย Nuxt.js
• ตอนที่ 9 - การ Deploy Nuxt.js
• ตอนที่ 10 - การทำ Internal API และ Middleware
• ตอนที่ 11 - ทำ SEO และ Meta tags
• ตอนที่ 12 - Workshop

มาถึงเรื่องการเก็บข้อมูลลง Store โดยใช้ Vuex กันบ้างครับ ตัว Nuxt.js ก็รองรับการใช้งาน Vuex เลย (default จะ disable) หากเราต้องการใช้งาน ก็แค่เพิ่มไฟล์ index.js ใน folder store ก็ได้แล้ว

โดย Vuex รองรับทั้งแบบ 1. ธรรมดา และ 2. แบบ modules โดยหลักการทำงานของ Nuxt Vuex คือ

1. Nuxt.js จะมองหาไฟล์ใน store ถ้ามี
2. จะทำการ import 'vuex' ให้อัตโนมัติ
3. เพิ่ม store ลงใน Vue instance.

state ควรจะเป็น function นะครับ เพื่อหลีกเลี่ยงปัญหา share state กับ server

ตัวอย่างเช่นไฟล์ store/index.js

1
export const state = () => ({
2
  counter: 0
3
})
4

5
export const mutations = {
6
  increment(state) {
7
    state.counter++
8
  }
9
}

เรามี state เก็บค่า counter และมี mutation ชื่อ increment สำหรับเพิ่มค่า counter ใน state

ตัวอย่าง vuex เวลาส่องใน Vue DevTools (ปกติใครเขียน Vue.js ก็ควรมีติด browser ไว้นะครับ)

สำหรับใครยังไม่เคยใช้ Vue DevTools สามารถดาวน์โหลดได้จาก Vue Devtools

Modules Mode

ปกติตัว Nuxt จะทำเป็น modules mode ให้เราอยู่แล้ว ตามชื่อไฟล์ หรือ folder เป็น namespaced ให้เรา เช่น เราสร้างไฟล์ store/todos.js

1
export const state = () => ({
2
  list: []
3
})
4

5
export const mutations = {
6
  add(state, text) {
7
    state.list.push({
8
      text,
9
      done: false
10
    })
11
  },
12
  remove(state, { todo }) {
13
    state.list.splice(state.list.indexOf(todo), 1)
14
  },
15
  toggle(state, todo) {
16
    todo.done = !todo.done
17
  }
18
}

จะได้ store เทียบเท่ากับการใช้ Vuex ปกติคือ

1
new Vuex.Store({
2
  state: () => ({
3
    counter: 0
4
  }),
5
  mutations: {
6
    increment(state) {
7
      state.counter++
8
    }
9
  },
10
  modules: {
11
    todos: {
12
      namespaced: true,
13
      state: () => ({
14
        list: []
15
      }),
16
      mutations: {
17
        add(state, { text }) {
18
          state.list.push({
19
            text,
20
            done: false,
21
            id: Date.now()
22
          })
23
        },
24
        remove(state, { todo }) {
25
          state.list = state.list.filter((item) => item.id !== todo.id)
26
        },
27
        toggle(state, { todo }) {
28
          todo.done = !todo.done
29
        }
30
      }
31
    }
32
  }
33
})

และไฟล์ pages/todos.vue แบบนี้

1
<template>
2
  <ul>
3
    <li v-for="todo in todos" :key="todo.id">
4
      <input :checked="todo.done" @change="toggle(todo)" type="checkbox" />
5
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
6
      <button @click="removeTodo(todo)">remove</button>
7
    </li>
8
    <li>
9
      <input @keyup.enter="addTodo" placeholder="What needs to be done?" />
10
    </li>
11
  </ul>
12
</template>
13

14
<script>
15
  import { mapMutations } from 'vuex'
16

17
  export default {
18
    computed: {
19
      todos() {
20
        return this.$store.state.todos.list
21
      }
22
    },
23
    methods: {
24
      addTodo(e) {
25
        this.$store.commit('todos/add', e.target.value)
26
        e.target.value = ''
27
      },
28
      ...mapMutations({
29
        toggle: 'todos/toggle'
30
      }),
31
      removeTodo(todo) {
32
        this.$store.commit('todos/remove', todo)
33
      }
34
    }
35
  }
36
</script>
37

38
<style>
39
  .done {
40
    text-decoration: line-through;
41
  }
42
</style>

Source Code จาก Nuxt Vuex Store

• จากตัวอย่างโค๊ด จะเห็นว่า เราสามารถใช้ Vuex ได้แบบปกติใน Nuxt.js เลยไม่ต้องทำอะไรเลย เพียงแค่สร้างไฟล์ใน store ปกติครับ
• ตัวอย่าง mapMutations คือการ map function ใน mutations ให้เราเรียกผ่าน this.toggle(value) ได้เลย

และสำหรับใครที่อยากรู้เรื่อง Vuex เพิ่มเติม แนะนำให้อ่าน Vuex Doc เพิ่มเติมนะครับ

ตัวอย่างการสร้างหลายๆ Modules

ตัวอย่างเช่น ผมมี vues 3 modules คือ

1. auth
2. users
3. posts

ทีนี้ ผมจะแยก เป็น folder และใน folder ผมก็จะแยก state.js, mutations.js, actions.js และมี index.js เพื่อรวมเป็น module อีกที แบบนี้

store/
  -- auth/
    -- mutations.js
    -- actions.js
    -- state.js
    -- getters.js
  -- users/
    -- mutations.js
    -- actions.js
    -- state.js
  -- posts/
    -- mutations.js
    -- actions.js
    -- state.js

และตัวอย่างแต่ละไฟล์ ประมาณนี้ครับ เช่น

ไฟล์ store/auth/state.js

1
export default () => ({
2
  isAuthenticated: false,
3
  currentUser: null
4
})

ไฟล์ store/auth/mutations.js

1
export default {
2
  setCurrentUser(state, payload) {
3
    state.currentUser = payload
4
    state.isAuthenticated = true
5
  }
6
}

ไฟล์ store/auth/actions.js

1
export default {
2
  login({ commit }) {
3
    // POST /auth/login , axios.post(url, payload).then()
4
    // if success then set response.data
5
    commit('setCurrentUser', response.data)
6
  }
7
}

หรืออย่างไฟล์ store/auth/getters.js หากเราอยากใช้ getters

1
export default {
2
  isAuthenticated: (state) => state.isAuthenticated
3
}

และเวลาเราใช้งาน แต่ละ modules ในหน้า pages เราใช้ mapActions และ mapGetters ก็จะได้หน้าตาประมาณนี้

1
<script>
2
import { mapActions, mapGetters } from 'vuex'
3

4
export default {
5
  computed: mapGetters({
6
    isAuthenticated: 'auth/isAuthenticated'
7
  }),
8
  methods: {
9
    ...mapActions({
10
      login: 'auth/login'
11
    })
12
  }
13
}
14
</script>

Hints & Questions?

เพื่อนๆ ลองนำ Vuex ไปประยุกต์กับเรื่องการ Fetch API จากตอนที่แล้วกันดูนะครับ โดย

1. สร้าง state สำหรับเก็บข้อมูล photos ที่ได้จาก API
2. เมื่อได้ข้อมูลก็ใช้ให้ actions หรือ mutation อัพเดทค่าใน state
3. ใช้ mapState, mapActions ของ Vuex Helpers มาช่วย

อ่านบทถัดไป 👉 ตอนที่ 8 - ทำระบบ Authentication ด้วย Nuxt.js