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

export const state = () => ({
  counter: 0
});

export const mutations = {
  increment(state) {
    state.counter++;
  }
};

export const state = () => ({
  list: []
});

export const mutations = {
  add(state, text) {
    state.list.push({
      text,
      done: false
    });
  },
  remove(state, { todo }) {
    state.list.splice(state.list.indexOf(todo), 1);
  },
  toggle(state, todo) {
    todo.done = !todo.done;
  }
};

new Vuex.Store({
  state: () => ({
    counter: 0
  }),
  mutations: {
    increment(state) {
      state.counter++;
    }
  },
  modules: {
    todos: {
      namespaced: true,
      state: () => ({
        list: []
      }),
      mutations: {
        add(state, { text }) {
          state.list.push({
            text,
            done: false,
            id: Date.now()
          });
        },
        remove(state, { todo }) {
          state.list = state.list.filter((item) => item.id !== todo.id);
        },
        toggle(state, { todo }) {
          todo.done = !todo.done;
        }
      }
    }
  }
});

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input :checked="todo.done" @change="toggle(todo)" type="checkbox" />
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">remove</button>
    </li>
    <li>
      <input @keyup.enter="addTodo" placeholder="What needs to be done?" />
    </li>
  </ul>
</template>

<script>
  import { mapMutations } from 'vuex'

  export default {
    computed: {
      todos() {
        return this.$store.state.todos.list
      }
    },
    methods: {
      addTodo(e) {
        this.$store.commit('todos/add', e.target.value)
        e.target.value = ''
      },
      ...mapMutations({
        toggle: 'todos/toggle'
      }),
      removeTodo(todo) {
        this.$store.commit('todos/remove', todo)
      }
    }
  }
</script>

<style>
  .done {
    text-decoration: line-through;
  }
</style>

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

export default () => ({
  isAuthenticated: false,
  currentUser: null
});

export default {
  setCurrentUser(state, payload) {
    state.currentUser = payload;
    state.isAuthenticated = true;
  }
};

export default {
  login({ commit }) {
    // POST /auth/login , axios.post(url, payload).then()
    // if success then set response.data
    commit('setCurrentUser', response.data);
  }
};

export default {
  isAuthenticated: (state) => state.isAuthenticated
};

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

export default {
  computed: mapGetters({
    isAuthenticated: 'auth/isAuthenticated'
  }),
  methods: {
    ...mapActions({
      login: 'auth/login'
    })
  }
}
</script>