기본적으로 0
ex)
A와 B를 양 옆으로 하고 싶은데
A의 속성에 flex-grow:1로 하면 B를 쭉 밀어낸다.
A영역이 쭉 늘어나고 B영역이 밀려난 것을 알 수 있다.
justify-content: space-between
를 A,B의 부모 태그에 추가하면 아래와 같다.
기본적으로 1
- 즉, 브라우저가 줄어드는 만큼 줄어드는것에 영향을 받는다.
숨겨진 오버 플로우의 콘텐츠 처리방법
영역을 넘어갈 경우 글자들을
...
으로 대체한다.
기존 vue의
1. 하위 컴포넌트에서 중간에 거쳐야 할 컴포넌트가 많을 경우와
2. Event bus를 사용하나 컴포넌트간 통신시 관리가 쉽지않은 문제를 해결
- state : 공통으로 사용할 변수 정의
- getters : 계산된 속성의 공통 사용 정의
- mutations : state를 변경시키는 역할 / 동기처리 (State관리)
- actions : mutations를 실행시키는 역할 / 비동기처리
- 컴포넌트는 Dispatch를 통해 Actions을 접근합니다.
1.1 Actions안에 있는 대상끼리도 서로 dispatch를 할 수 있다.- Action에서는 보통 Backend API를 호출하여 값을 가져온 후에, Commit을 통해 Mutations에 접근합니다.
- Mutations에서는 크롬 확장 프로그램인 Devtools와 통신을 하여 디버깅이 쉽도록 기능을 제공하는 역할을 할 뿐 이니라, Mutate 를 통해 State를 변경 합니다.
- State가 변경되면 컴포넌트는 다시 렌더링 되어 화면에 나타냅니다.
파일 내용이 이와 같다.
import {createStore} from 'vuex'
import workspace from './workspace'
export default createStore({
modules : {
workspace
}
})
workspace라는 내용으로 module을 가져와 처리한다.
methods : {
async createWorkspace() {
await this.$store.dispatch('workspace/createWorkspace',{
parentId : this.workspace.id
})
this.showChildren = true;
},
deleteWorkspace() {
this.$store.dispatch('workspace/deleteWorkspace',{
id:this.workspace.id
})
}
}
methods에서
this.$store.dispatch
를 통해 createWorkspace와 deleteWorkspace에 요청을 한다.
actions: {
async createWorkspace({dispatch}, payload = {}) {
const {parentId} = payload
const workspace = await _request({
method : 'POST',
body : JSON.stringify({
title : '',
parent: parentId
})
})
await dispatch('readWorkspaces') // nav 목록 갱신
router.push({
name : 'Workspace',
params:{
id: workspace.id
}
})
},
....
async deleteWorkspace({state,dispatch}, payload) {
const {id} = payload
await _request({
id,
method : 'DELETE',
})
console.log(id,router.currentRoute.value.params.id)
console.log(state,state.workspaces[0].id)
await dispatch('readWorkspaces')
if( id === parseInt(router.currentRoute.value.params.id, 10)){
router.push({
name : 'Workspace',
params : {
id : state.workspaces[0].id
}
})
}
....
async readWorkspaces({commit ,dispatch }) {
const workspaces = await _request({
method : 'GET',
})
commit('assignState', {
workspaces: workspaces
})
dispatch('findWorkspacePath')
if(!workspaces.length){
dispatch('createWorkspace')
}
},
},
mutations : {
assignState(state,payload){
Object.keys(payload).forEach(key=>{
state[key] = payload[key]
})
}
},
둘다 실행을 하면서 dispatch로 readWorkspaces를 접근한다
readWorkspaces는 또다시 새로운 dispatch를 하고
commit을 통해 mutations에 접근한다.
mutations의 assignState를 통해 state가 변경되고 이를 통해
컴포넌트가 렌더링 된다.
props는 부모 자식간의 부모에서 자식으로 전달하는 것에 대한 것이고
store는 서로간의 관계가 존재하지않는 다른 컴포넌트들 간에 공통된 데이터를 쓰이게 해준다.
어떤 대상을 재사용할 것 같을 떄 독립적인 기능으로 분리시킬 필요가 있냐에 따라
http에서 https로 요청은 가능
https에서 http로 요청은 X
store로 값을 받을 떈 computed로 받아야한다.
Vuex 스토어에 있는 state를 가져오기 위해서는 state로 접근해서 Vue 컴포넌트의 계산된 속성(computed)에 주입 해야한다.