vue-cli 에서 vuex 를 어떻게 사용 하 는 지 자세히 알 아 보기

머리말
알다 시 피 vuex 는 vue.js 응용 프로그램 을 위 한 상태 관리 모델 로 중대 형 단일 페이지 응용 프로그램 을 구축 할 때 vuex 를 사용 하면 구성 요소 외부 관리 상 태 를 더욱 잘 할 수 있다.vue-cli 는 vue 의 공식 비계 로 웹 팩 을 편리 하 게 설정 하 는 데 도움 을 줄 수 있 습 니 다.그 러 고 보 니 vue-cli 와 vuex 를 동시에 사용 해 야 할 가능성 이 크다.
vue-cli 에서 vuex 를 사용 하 는 방법
프로젝트 구축 및 vuex 추가
vue-cli 를 사용 하여 vue 프로젝트 를 만 들 때(프로젝트 이름 이 learn-vuex 라 고 가정)구축 이 완 료 된 파일 디 렉 터 리 는 이 렇 습 니 다.
 
우선npm install --save-dev vuex을 사용 하여 vuex 를 의존 에 추가 합 니 다.그 다음 에 구성 요소 에서 vuex 를 어떻게 사용 하 는 지 대체적으로 다음 과 같은 두 가지 형식 이 있 습 니 다.
store 옵션 통과 하기
vue-cli 구축 에 성공 하면 src 디 렉 터 리 에 main.js 파일 이 있 습 니 다.main.js 의 주요 역할 은 프로젝트 의 맨 위 에 있 는 app.vue 구성 요 소 를 DOM 에 마 운 트 하 는 것 입 니 다.다른 모든 구성 요 소 는 app.vue 의 하위 구성 요소 로 볼 수 있 습 니 다.
main.js 에서 다음 과 같은 조작 을 합 니 다.

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'; 

Vue.config.productionTip = false

//       
Vue.use(Vuex);
const store = new Vuex.Store({
 state： {}，
 getters: {},
 actions: {},
 mutations: {}
});
//  router  ，        store: store
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

구성 요소 에서 store 인 스 턴 스 를 사용 할 수 있 습 니 다.
프로젝트 에 설정 해 야 할 vuex 옵션 이 많다 면 vuex 의 관련 코드 를 다른 모듈 로 나 누 어야 합 니 다.
src 에서 store 폴 더 를 새로 만 들 고 폴 더 에 다음 과 같은 파일 을 만 듭 니 다.
 
우 리 는 파일 이름 을 마음대로 설정 할 수 있 지만,파일 이름 을 통 해 이 파일 이 무엇 에 쓰 이 는 지 판단 할 수 있 는 것 이 좋 습 니 다.

index.js:각 모듈 을 통합 하여 vuex 인 스 턴 스 를 만 들 고 내 보 냅 니 다

rootState.js:vuex 인 스 턴 스 를 설정 하 는 state 옵션

getters.js:getter 옵션

mutations.js:mutations 옵션

actions.js:actions 옵션

index.js 에서 필요 합 니 다.

import Vue from 'vue';
import Vuex from 'vuex';
import state from './rootState.js';
import getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';

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

export default store;

나머지 네 개의 파일 설정 은 모두 차이 가 많 지 않 습 니 다.rootState.js 를 예 로 들 면

const state = {
 count: 0,
 arr: [0,1,2,3,4,5]
}

export default state;

이렇게 해서 main.js 에서 우리 가 작성 해 야 할 코드 가 많이 줄 어 들 었 습 니 다.

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'; 

Vue.config.productionTip = false

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

vuex 인 스 턴 스 를 vue 프로 토 타 입 체인 에 마 운 트 합 니 다.
이것 은 비주류 방식 으로 주로 axios 의 계발 을 받 았 다.여기,이곳vue 구성 요소 에서 axios 를 어떻게 사용 하 는 지 설명 하 는 블 로그 가 있 는데 axios 를 vue 원형 체인 에 마 운 트 하 는 것 은 vue.use 를 통 해 axios 를 사용 할 수 없 기 때문이다.
이런 방법 중에서 우 리 는 필요 하 다.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'; 

Vue.config.productionTip = false

// vue   vuex     vue.use  
Vue.use(Vuex);
//     vue        ，         
//                
Vue.prototype.$store = new Vuex.Store({
 state： {}，
 getters: {},
 actions: {},
 mutations: {}
});

//   store  
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

이렇게,이렇게this.$store를 통 해 vuex 를 사용 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.