#프로젝트 생성 명령어 1
vue create vue-todo
cd vue-todo
npm run serve

프로젝트 생성 명령어 2
vue init webpack-simple vue-todo
cd vue-todo
npm install
npm run dev

function a (){
    let a = 1;    
    let a = 10; //error
}
//let undefined

const a = 10;
a = 1; //error

const a = {};
a.num = 10; //ok

function f(){
    let x;
    {
        const x = 'test';
        x = 'test2';//error
    }
    x = 'let_test';
    let x = 'test'; //errror
}

//ES5 
var sum = function sum(){
    return 1 + 2;
}

//ES6 function 생략
var sum = () => {
    return 1 + 2;
}

var arr =  [1, 2, 3];
arr.forEach((num) => {
    console.log(num);
});

//ES5 
var test = {
    test : function() {
        console.log('test');
    }
};

//ES6
var test = {
    test() {
        console.log('test');
    }
};
// 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능 ES6
var num = 10;
var numObj {
    //num : num, ES5
    num 
};

//libs/math.js
export function sum(x, y) {
    return x + y;
}
export var pi = 3.141593;

//main.js
import {sum} from 'libs/math.js';
sum(1, 2);

//util.js
export default function (a) {
    return console.log(a);
}

import logger from 'util.js';
logger('test');
import logger2 from 'util.js';
logger2('test2');

npm install vuex --save

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export const store = new Vuex.Store({
  
});

import Vue from 'vue'
import App from './App.vue'
import { store } from './store/store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

//vue 
data : {
    message : 'test'
}
//vuex src/store/store.js
state : {
    mesage : 'test'
}
//vue
{{ message }}
//vuex
{{ this.$store.state.message }}

//store.js
state : {
    num : 10
},
getter : {
    getNumber(state){
        return state.num;
    },
    doubleNumber(state){
        return state.num * 2;
    }
}
{{ this.$store.getters.getNumber }}
{{ this.$store.getters.doubleNumber }}

//store.js
state : {
    num : 10
},
mutations : {
    printNumbers(state){
        return state.num;
    },
    sumNumbres(state, num){
        return state.num + num;
    }
}
this.$store.commit('printNumbers');
this.$store.commit('sumNumbres',20);

//store.js
state: {
    num: 10
},
mutations:{
    doubleNumber(state) {
        state.num * 2;
    }
},
actions: {
    delayDoubleNumber(context) {
        context.commit('doubleNumber');
    }
}
//App.vue
this.$store.dispatch('delayDoubleNumber');

import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'

export default {
    computed() {
        ...mapState([]),
        ...mapGetters([]),
    },
    methods: {
        ...mapMutations([]),
        ...mapActions([]),
    }
}
... ES6 Object Spread Operator

let john = {
  field: 'web',
  language: 'js'
};
//Object Spread Operator 미적용
let developer = {
  nation: 'korea',
  field: john.field,
  language: john.language
};
//Object Spread Operator 적용
let developer = {
  nation: 'korea',
  ...john    
};

//App.vue
import { mapState } from 'vuex'

computed() {
    ...mapState(['num'])
    //num() { return this.$store.state.num; }
}

//store.js
state: {
    num: 10
}

<p>{{ this.$store.state.num }}</p>
<p>{{ this.num }}</p>

//App.vue
import { mapGetters } from 'vuex'
computed() {
    ...mapGetters(['reverseMessage'])
}

//store.js
getters: {
    reverseMessage(state) {
        return state.msg.split('').reverse().join('');
    }
}

<p>{{ this.$store.getters.reverseMessage }}</p>
<p>{{ this.reverseMessage }}</p>

//App.vue
import { mapMutations } from 'vuex'

methods: {
    ...mapMutations([함수명]),
}

//store.js
mutations: {
    clickBtn(state) {
        alert(state.msg);
    }
}

<button @click="clickBtn">popup message</button>

//App.vue
import { mapActions } from 'vuex'
methods:{
    ...mapActions(['delayClickBtn']),
}

//store.js
actions: {
    delayClickBtn(context) {
        setTimeout(() => context.commit('clickBtn'), 2000);
    }
}

<button @click="delayClickBtn">delay popup message</button>

//배열 리터럴
...mapMutations([
    'clickBtn',
    'addNumber'
])

//객체 리터럴
...mapMutations({
    popMsg: 'clickBtn' //컴포넌트 메서드 명 : Store의 뮤테이션 명
})

//store.js
import Vue from 'vue'
import Vue from 'vuex'

export const store = new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {},
});

//store.js
import Vue from 'vue'
import Vue from 'vuex'
import * as getters from 'store/getters.js'
import * as mutations from 'store/mutations.js'
import * as from actions 'store/actions.js'

export const store = new Vuex.Store({
    state: {},
    getters: getters,
    mutations: mutations,
    actions: actions,
});

//store.js
import Vue from 'vue'
import Vue from 'vuex'
import todo from 'modules/todo.js'

export const store = new Vuex.Store({
    modules: {
        moduleA: todo, //모듈 명칭 : 모듈 파일명
        todo // todo: todo
    }
});

//todo.js
const state = {}
const getters = {}
const mutations = {}
const actions = {}