React에서의 children과 비슷하다.
부모에서 정의한 후 자식에서는 slot 태그를 사용하면 부모에서 정의한 내용들이 들어간다.
부모의 데이터를 사용할 수 있다는 장점이 있다.
| Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법 (0) | 2020.03.14 |
|---|---|
| Vuex 사용법 (0) | 2020.02.19 |
| Vue.js에서의 Vuex, EventBus (0) | 2020.02.18 |
| Vue 객체, 배열을 index 값으로 바꾸기 (0) | 2020.02.17 |
| Vue.js watch: {} (0) | 2020.02.16 |
Vuex에서 Cannot read property 'state' of undefined 해결법을 다뤄보고자 한다.
Vuex에서
"this.$store.state.데이터" 부분에서 오류가 발생하는데 해결법은 간단하다.
Vue와 Vuex 연결을 해주지 않은 것이다.
Vue 최상위 컴포넌트, 그러니까 .Vue 파일 중에 제일 처음 시작하는 파일에
import store from "./store"; 한 줄을 추가해준다.
최상위 컴포넌트는 main.js를 보면 알 수 있다.
그리고 Vuex 저장소를 store.js 파일에 했을 때 저렇게 하면 된다.
(안해봐서 되는지는 모르겠지만 만약에 다른 js파일에 저장했다면 아마도 그 이름을 입력하면 될 것이다)
그리고 store.js 파일 윗 줄에 있는 import들 아래에 Vue.use(Vuex); 한줄 추가해주면 된다.
이러면 Vue와 Vuex 연결이 되고, $store를 사용하여 store에 접근 가능하다.
| Vue.js Slot (내용 추가 중) (3) | 2020.03.14 |
|---|---|
| Vuex 사용법 (0) | 2020.02.19 |
| Vue.js에서의 Vuex, EventBus (0) | 2020.02.18 |
| Vue 객체, 배열을 index 값으로 바꾸기 (0) | 2020.02.17 |
| Vue.js watch: {} (0) | 2020.02.16 |
store.js를 만든다.
//store.js의 내부
import Vuex from "vuex"; //vuex 라이브러리를 import한다
export default new Vuex.Store({
state: {}, //vue의 data와 비슷
mutations: {}, // vue의 computed와 비슷, 함수 이름은 대문자로 지어야한다.
getters: {}, // state를 수정할 때 사용, 동기적으로 하나씩 혹은 하나의 그룹을 바꾼다
actions: {} // 비동기를 사용할 때, 또는 여러 뮤테이션을 연달아 실행할 때
});
store은 여러개 만들 수도 있다.
| Vue.js Slot (내용 추가 중) (3) | 2020.03.14 |
|---|---|
| Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법 (0) | 2020.03.14 |
| Vue.js에서의 Vuex, EventBus (0) | 2020.02.18 |
| Vue 객체, 배열을 index 값으로 바꾸기 (0) | 2020.02.17 |
| Vue.js watch: {} (0) | 2020.02.16 |
Vuex는 데이터를 중앙에서 관리해주는 것이다.
React에서는 Redux가 비슷한 역할을 해준다.
Eventbus는 매쏘드나 함수의 중간 매개체 역할을 해준다.
$on으로 연결하고, $emit으로 그 함수 혹은 매쏘드를 실행시킨다.
| Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법 (0) | 2020.03.14 |
|---|---|
| Vuex 사용법 (0) | 2020.02.19 |
| Vue 객체, 배열을 index 값으로 바꾸기 (0) | 2020.02.17 |
| Vue.js watch: {} (0) | 2020.02.16 |
| Vue.js로 만든 프로젝트를 firebase 로 배포하기 (0) | 2020.01.30 |
Vue에서는 객체나 배열 내부 정보를 바꿀 때 index로 바꾸게 되면 바뀌지 않는다.
data() {
return {
array: [["", "", ""], ["", "", ""], ["", "", ""]],
};
}
이렇게 존재할 때,
array[1][0]= "a";
이렇게 하면 data는 바뀌지만, 바뀐 내용이 화면에 나오지 않는다.
해결 방법은 2가지이다.
import Vue from "vue" 로 import한 뒤,
Vue.set(this.array[1], 0, "a");
이렇게 Vue의 set 매쏘드를 이용하면 된다.
혹은 import하지 않고
그냥 this.$set(this.array[1], 0, "a");
이렇게 해도 된다.
만약 3차원, 4차원 배열인 경우에는
set(array[3][1][2] , 0, "a")
이렇게 마지막 인덱스만 2번째 인자로 받아주면 된다.
| Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법 (0) | 2020.03.14 |
|---|---|
| Vuex 사용법 (0) | 2020.02.19 |
| Vue.js에서의 Vuex, EventBus (0) | 2020.02.18 |
| Vue.js watch: {} (0) | 2020.02.16 |
| Vue.js로 만든 프로젝트를 firebase 로 배포하기 (0) | 2020.01.30 |
watch는 데이터가 특정 조건일 때를 감지하여 그 때 동작들을 수행할 수 있다.
예를 들면
data() {
number: null,
}
이렇게 있다면
watch : {
number(value, oldValue){
if( value ===0){
number = 1;
}
}
}
이런식으로 함수로 선언하는데, 첫 번째 인자는 현재 값, 두번째 인자는 바뀌기 전 값이 들어간다.
| Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법 (0) | 2020.03.14 |
|---|---|
| Vuex 사용법 (0) | 2020.02.19 |
| Vue.js에서의 Vuex, EventBus (0) | 2020.02.18 |
| Vue 객체, 배열을 index 값으로 바꾸기 (0) | 2020.02.17 |
| Vue.js로 만든 프로젝트를 firebase 로 배포하기 (0) | 2020.01.30 |
일단 firebase에 프로젝트를 만든다.
그 후 터미널 창에
npm install -g firebase-tools 입력하여 설치, (띄어쓰기 주의 firebase와 -tools 사이에는 띄어쓰기가 없다)
만약 error가 뜬다면 sudo 명령어로 권한 받아서 설치를 해야해서 문제가 생길 수 있으므로
sudo npm install -g firebase-tools 로 설치한다.
그리고 npm run build로 dist 폴더를 갱신 혹은 생성한다.
참고로 필자는 package.json의 스크립트 부분은
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
이렇게 되어있다. dist 폴더가 생성되지 않는다면 참고해서 변경
그리고 dist내에 index.html이 있다면 실행시켜봐서 자신의 만든 vue 앱이 잘 돌아가는지 확인
만약 index.html이 없다면 최상위 폴더에 있는 index.html을 복사해서 dist폴더 내에 넣는다.
그리고 index.html 내에 있는 경로 중 "dist/build.js" 이렇게 경로가 설정되어 있는 부분을 에서
dist를 지워서 "build.js"로 수정해준다.
필자 같은 경우 body부분에 있는 부분을 수정했다.
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
그리고 vue 최상위 폴더로 가서 명령어
firebase init
그리고 세팅을 해야한다
처음에 database와 hosting 선택
두번째로 existing project에서 만들어놓은 프로젝트 선택
세번째 rules는 그냥 엔터로 기본값으로
pubilc directory를 물으면 dist 입력
configure ...뭐시기뭐시기 /index.html 을 물으면 y
rewrite /index.html 물으면 n
세팅 끝
그리고 이제 명령어
firebase deploy
치면 배포 성공!!
| Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법 (0) | 2020.03.14 |
|---|---|
| Vuex 사용법 (0) | 2020.02.19 |
| Vue.js에서의 Vuex, EventBus (0) | 2020.02.18 |
| Vue 객체, 배열을 index 값으로 바꾸기 (0) | 2020.02.17 |
| Vue.js watch: {} (0) | 2020.02.16 |