다음과 같은 store index.js 파일을
index.js
import Vue from 'vue' import Vuex from 'vuex'; import axios from 'axios'; Vue.use(Vuex); export default new Vuex.Store({ state: { //data 데이터 todos: [ { id: 1, text: "buy a car", checked: false }, { id: 2, text: "paly a game", checked: true }, { id: 3, text: "buy a gg", checked: false }, ], users: [] }, mutations: { //데이터를 실질적으로 바꾸는 역할 ADD_TODO(state, value) { state.todos.push({ id: Math.random(), text: value, checked: false }); }, TOGGLE_TODO(state, { id, checked }) { const index = state.todos.findIndex(todo => { return todo.id === id; }); state.todos[index].checked = checked; }, DELETE_TODO(state, todoId) { const index = state.todos.findIndex(todo => { return todo.id === todoId; }); state.todos.splice(index, 1); }, SET_USERS(state, users) { state.users = users; } }, actions: { //methods 함수 addTodo({ commit }, value) { setTimeout(() => { commit('ADD_TODO', value); }, 500); }, toggleTodo({ commit }, payload) { setTimeout(() => { commit('TOGGLE_TODO', payload); }, 500); }, deleteTodo({ commit }, todoId) { setTimeout(() => { commit('DELETE_TODO', todoId); }, 500); }, getUsers({ commit }) { axios.get('https://jsonplaceholder.typicode.com/users',).then( res => { console.log(res.data); commit('SET_USERS', res.data); }); } }, getters: { //computed 역할 numberOfCompletedTodo: state => { return state.todos.filter(todo => todo.checked).length; } } });
1. index.js , modules/todo.js , modules/user.js 세개의 파일로 분리
1) index.js
strict: true 설정
import Vue from 'vue'; import Vuex from 'vuex'; import todo from './modules/todo'; import user from './modules/user'; Vue.use(Vuex); export default new Vuex.Store({ strict: true, modules: { todo: todo, user: user } });
2) modules/todo.js
namespaced: true 추가
export default { namespaced: true, state: { todos: [ { id: 1, text: "buy a car", checked: false }, { id: 2, text: "paly a game", checked: true }, { id: 3, text: "buy a gg", checked: false }, ], }, mutations: { //데이터를 실질적으로 바꾸는 역할 ADD_TODO(state, value) { state.todos.push({ id: Math.random(), text: value, checked: false }); }, TOGGLE_TODO(state, { id, checked }) { const index = state.todos.findIndex(todo => { return todo.id === id; }); state.todos[index].checked = checked; }, DELETE_TODO(state, todoId) { const index = state.todos.findIndex(todo => { return todo.id === todoId; }); state.todos.splice(index, 1); }, }, actions: { //methods 함수 addTodo({ commit }, value) { setTimeout(() => { commit('ADD_TODO', value); }, 500); }, toggleTodo({ commit }, payload) { setTimeout(() => { commit('TOGGLE_TODO', payload); }, 500); }, deleteTodo({ commit }, todoId) { setTimeout(() => { commit('DELETE_TODO', todoId); }, 500); }, }, getters: { //computed 역할 numberOfCompletedTodo: state => { return state.todos.filter(todo => todo.checked).length; } } };
3) modules/user.js
import axios from 'axios'; export default { namespaced: true, state: { users: [] }, mutations: { SET_USERS(state, users) { state.users = users; } }, actions: { getUsers({ commit }) { axios.get('https://jsonplaceholder.typicode.com/users',).then( res => { console.log(res.data); commit('SET_USERS', res.data); }); } }, }
2. 사용법 예
dispatch
this.$store.dispatch('todo/deleteTodo', this.todo.id);
getters
this.$store.getters["todo/numberOfCompletedTodo"];
mapState, mapActions
<template> <div> <div v-for="user in users" :key="user.id"> {{user.name}} </div> </div> </template> <script> import {mapState, mapActions} from 'vuex'; export default { created(){ this.$store.dispatch('user/getUsers'); }, computed:{ ...mapState({ users:state=>state.user.users }) }, methods:{ ...mapActions('user',['getUsers']) } } </script>
댓글 ( 4)
댓글 남기기