uni-app에서 vuex를 사용하는 방법

방법: 1. 프로젝트 루트 디렉터리에 새 저장소 디렉터리를 만들고 이 디렉터리에 "index.js" 파일을 만듭니다. 2. "index.js" 아래에 vue 및 vuex를 추가합니다. 3. "main"에 Vuex를 탑재합니다. 4. "pages/index/index.vue"에서 vuex를 사용하세요.

이 튜토리얼의 운영 환경: windows7 시스템, vue2.9.6&&uni-app2.5.1 버전, DELL G3 컴퓨터.

uni-app에서 vuex를 사용하는 방법:

Vuex는 uni-app에 내장되어 있으므로 참조만 하면 됩니다

1. uni-app 프로젝트의 루트 디렉터리에 새 저장소 디렉터리를 만듭니다. , 그리고 저장소에 새 저장소 디렉터리를 생성합니다.

2. 새로 생성된 index.js에 다음과 같이 vue 및 vuex를 도입합니다.

//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({//全局变量定义
    state: {
        forcedLogin: false,//是否需要强制登录
        hasLogin: false,
        userName: "",
        userId:'',
        token:'',
        pointId:'',
    },
    mutations: {
        login(state, user) {
            state.userName = user.username || '';
            state.hasLogin = true;
            state.userId = user.id || '';
            state.token = user.token || '';
            state.pointId = user.pointId || '';
        },
        logout(state) {
           state.userName = "";
           state.hasLogin = false;
           state.userId = '';
           state.token = '';
           state.pointId = '';
        }
    }
})
export default store

3. main.js

import store from './store'  
Vue.prototype.$store = store

정의하려는 js 파일 각 페이지에 있는 변수와 메소드를 사용하고 적용할 수 있습니다. 이 js 파일을 가져와 프로젝트 디렉토리의 main.js 파일에 메소드를 선언해야 합니다. 다음 그림에 표시된 대로:

4. 페이지/index/ index.vue에서는

• 을 사용하여 먼저

• 페이지에서 vuex 메서드를 가져온 다음 계산된 속성 메서드에서 mapState를 사용합니다. 전역 변수를 모니터링합니다.

• index.vue 페이지에 들어가자마자 onload() 페이지가 로딩되면 로그인 여부를 확인합니다. 그렇지 않으면 '로그인 작업'을 수행하라는 대화 상자가 나타납니다.

로그인 페이지

• 먼저 다음과 같이 페이지에서 vuex 메소드를 가져옵니다.

• 전역 변수를 모니터링하려면 계산된 속성 메소드에서 mapState를 사용하고 전역 메소드를 모니터링하려면 메소드에서 mapMutations를 사용하세요. , 아래와 같이

  
  

• 네트워크 요청이 성공한 후 콜백 함수 성공에서 이 메서드를 호출하고 콜백 함수의 반환 값 데이터를 로그인 메서드에 전달합니다

  
  

• 그런 다음 store/index.js 파일의 로그인 방법은 전달된 사용자 데이터가 vuex에 저장됩니다.
  

Extension

은 vue 파일에서 값을 가져오는 데 사용됩니다. 예를 들어 'this.$store.state.token'을 사용하여 해당 토큰을 얻을 수 있습니다.

js 파일에서 사용

1. '../../store' 첫 번째 견적에서 스토어 가져오기

2. Store.state.token 값

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오 를 방문하세요. !

위 내용은 uni-app에서 vuex를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!