Vuex, 애플리케이션 로그인 로직
Vue TIL
- Scoped속성을 가진 style 태그
<style scoped>
: style태그에 선언된 CSS의 범위를 현재 컴포넌트로 제한한다.
: https://vue-loader-v14.vuejs.org/kr/features/scoped-css.html
scoped style이 적용된 모습
- router-link-exact-active
: 현재 라우트 경로와 정확하게 일치하는 링크가 활성화 되었을 때 적용될 CSS를 지정한다.
a.router-link-exact-active {
//속성
}
😊 로그인 이후의 처리
- 로그인 이후 메인 페이지로 이동하기
: https://router.vuejs.org/kr/guide/essentials/navigation.html
await this.login();
// 메인 페이지로 이동
this.$router.push('/main');
위와 같은 방식을 뷰의 프로그래밍적 네비게이션이라고 한다.
this.$router
를 통해서 라우터 객체에 접근할 수 있고,this.$router.push()
에 경로를 파라미터로 전달해서 라우트를 변경할 수 있다.
<router-link to="">
로 이동한 것과 같은 효과를 가진다.
😊 Vuex
-
컴포넌트 간 데이터를 전달하는 방법
: props, event를 이용한 통신
: 이벤트 버스
: Vuex 저장소 -
설치
npm install vuex
- 연결
//src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({});
//main.js
import store from '@/store';
new Vue({
render: h => h(App),
store, //store 전달
}).$mount('#app');
Vuex store는 뷰 컴포넌트에서 this.$store를 통해서 접근할 수 있다.
- 로그인한 유저이름 header에 표시하기
const store = {
state: {
username: '',
},
mutations: {
setUsername(state, username) {
state.username = username;
}
}
}
//LoginForm.vue
const {data} = await this.login();
//로그인한 사용자의 username값을 setUsername의 인자로 전달ㄴ
this.$store.commit('setUsername', data.username);
// Header.vue 사용자 이름 헤더에 표시
<header>{{ $store.state.username }}</header>
: store에 state는 항상 mutations를 이용해서 값을 변경해줘야 한다.
: mutations를 호출할 때는this.$store.commit()
을 통해 호출해야 하고, mutation는 항상 첫번째 인자로 state를 전달받는다.
: state는this.$store.state
를 통해서 접근할 수 있다.
- Tip: ✨ package.json의 dependencies vs devDependencies (배포용 라이브러리 vs 개발용 라이브러리)
: dependencies에 있는 라이브러리들은 npm run build의 결과물에 포함된다. ex) vuex, axios, vue-router, vue ... => 애플리케이션을 동작하는데 필요한 라이브러리들!
: devDependencies에 있는 라이브러리들은 npm run build의 결과물에 포함되지 않는다. ex) babel, eslint, prettier ...
: https://joshua1988.github.io/webpack-guide/build/npm-module-install.html#%EA%B0%9C%EB%B0%9C%EC%9A%A9-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%99%80-%EB%B0%B0%ED%8F%AC%EC%
Author And Source
이 문제에 관하여(Vuex, 애플리케이션 로그인 로직), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kyh196201/Vuex-애플리케이션-로그인-로직저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)