한눈 에 볼 수 있 는 vuex 로그 인 인증 실현(사례 첨부)

하나,vuex 는 무엇 입 니까?
Vuex 는 Vue.js 응용 프로그램 을 위 한 상태 관리 모델 입 니 다.이 는 중앙 식 저장 관리 에 응 용 된 모든 구성 요소 의 상 태 를 사용 하고 해당 하 는 규칙 으로 상 태 를 예측 가능 한 방식 으로 변화 시 킵 니 다.
쉽게 말 하면 Vuex 는 Redux 와 유사 한 상태 관리자 로 Vue 의 모든 구성 요소 상 태 를 관리 합 니 다.
대형 단일 페이지 애플 리 케 이 션(SPA)을 개발 하려 면 여러 개의 보기 구성 요소 가 같은 상태 에 의존 하고 서로 다른 보기 에서 온 행동 은 같은 상 태 를 변경 해 야 합 니 다.
상기 상황 이 발생 했 을 때,당신 은 Vuex 를 사용 하 는 것 을 고려 해 야 합 니 다.이것 은 구성 요소 의 공유 상 태 를 추출 하여 전역 단일 모드 로 관리 할 수 있 습 니 다.이렇게 하면 당신 이 어디에서 상 태 를 바 꾸 든 지 간 에 이 상태의 구성 요 소 를 사용 하여 상응하는 수정 을 하 라 고 통지 할 것 이다.
vuex 는 크게 다음 과 같은 몇 부분 으로 나 뉜 다.
state 는 데이터 공유 데이터 저장 에 사용 합 니 다데이터 상 태 를 바 꾸 는 데 사용 되 는 mutation

getters 는 공유 데 이 터 를 여과 하 는 데 사용 된다

action 해결 비동기 변화 공유 데이터

modules:store 의 서브 모듈,대형 프로젝트 를 개발 하고 상태 관 리 를 편리 하 게 하기 위해 사용 하 는vuex 사용
1.우선 vue-cli 프로젝트 를 만 듭 니 다.자세 한 설명 은 없습니다.

vue init webpack mylogin

2.vuex 설치:

npm install vuex --save

3.src 디 렉 터 리 에 새 폴 더 store 를 만 들 고 vuex 내용 을 저장 합 니 다.
디 렉 터 리 구 조 는 다음 과 같 습 니 다.

4.main.js 에 vuex 도입

import Vuex from 'vuex'
import store from './store'
Vue.use(Vuex)

5.store 폴 더 에 state.js 를 새로 만 들 고 vuex 는 데 이 터 를 저장 합 니 다.
내용 은 다음 과 같다.

const state={
 userInfo:''
}
export default state;

userInfo 는 사용자 정 보 를 저장 하고 값 이 있 는 지 에 따라 페이지 를 뛰 어 넘 는 지 판단 합 니 다.
6.store 폴 더 에 multation.js 를 새로 만 들 고 vuex 에 저 장 된 데 이 터 를 수정 합 니 다.
내용 은 다음 과 같다.

const mutations={
 login(state,v){
  state.userInfo=v;
 }
}
export default mutations;

7.store 폴 더 에 index.js 를 새로 만 들 고 vuex 를 초기 화 합 니 다.
내용 은 다음 과 같다.

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './multation'

Vue.use(Vuex);
const store =new Vuex.Store({
 state,
 mutations
})
export default store;

이 때 브 라 우 저 에서 다음 을 볼 수 있 습 니 다.(브 라 우 저 는 플러그 인 vue devTools 를 추가 해 야 합 니 다)

8.본 항목 의 인 터 페 이 스 는 다음 과 같다
홈 페이지 와 로그 인 페이지

9.login.vue 제출 방법 은 다음 과 같 습 니 다.

submitBtn(){
 let me=this;
 if(!me.user.username||!me.user.pwd){
  alert("          ");
 }
 else {
  this.$store.commit('login',this.user);
  this.$router.push('./');
 }
}

commt 를 통 해 multations 에서 방금 정 의 된 login 방법 을 실행 합 니 다.로그 인 을 누 르 면 state 의 userInfo 가 할당 되 었 습 니 다.다음은 이 필드 에 값 이 있 는 지 판단 하여 페이지 전환 을 진행 합 니 다.
10.main.js 에서 router.beforeEach 방법 으로 vuex 의 userInfo 를 판단 합 니 다.

router.beforeEach(function(to,from,next){
 if(store.state.userInfo||to.path==='/login'){
  next();
 }
 else {
  next({path:'/login'})
 }
})

효과 그림:

로그 인 후:

사례 주소:https://github.com/myweiwei/vuex-login
계속 업데이트 보완,당신 의 비판 지적 을 기대 합 니 다!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.