vue+vuex+axios 배경 에서 데 이 터 를 가 져 와 vuex 에 저장 하고 구성 요소 간 에 데 이 터 를 공유 합 니 다.

vue 프로젝트 에서 구성 요소 간 에 서로 값 을 전달 하거나 배경 에서 가 져 온 데 이 터 는 여러 구성 요소 가 사용 해 야 하 는 경우 가 많 습 니 다.vuex 를 도입 하여 이런 어 지 러 운 상 태 를 관리 하 는 것 을 고려 할 필요 가 있 습 니 다.오늘 은 이 블 로그 에서 이 전체 과정 을 기록 하 는 데 사 용 됩 니 다.배경 api 인 터 페 이 스 는 webpack-server 시 뮬 레이 션 인 터 페 이 스 를 사용 합 니 다.이 앞의 글 에서 언급 한 바 와 같이 필요 한 것 은 뒤 져 볼 수 있 습 니 다
전체 프로 세 스 는 구성 요소 의 created 에 dispatch 를 제출 한 다음 action 을 통 해 봉 인 된 axios 를 호출 한 다음 mutation 을 실행 하여 상태 변경 state 의 데 이 터 를 제출 한 다음 구성 요소 의 계산 속성 에서 state 의 데 이 터 를 가 져 와 페이지 에 렌 더 링 합 니 다.
우선 프로젝트 에 vuex 를 설치 해 야 합 니 다:
명령 npm install vuex--save-dev 실행
프로젝트 의 입구 js 파일 main.js 에서
import store from './store/index'
vue 에 store 를 마 운 트 합 니 다.

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

그 다음 에 전체 store 의 디 렉 터 리 구 조 를 보 세 요.modules 폴 더 는 서로 다른 기능 도 면 의 상 태 를 모듈 로 나 누 는 데 사 용 됩 니 다.index.js 폴 더 는 store 의 입구 파일 이 고 types 폴 더 는 상수 mutation 을 정의 하 는 폴 더 입 니 다.
전체 vuex 의 디 렉 터 리 구 조 는 다음 과 같다.

여기에 나 는 모든 axios 처리 와 axios 패 키 지 를 작성 하기 위해 폴 더 fetch 를 새로 만 들 었 다.
fetch 폴 더 에 api.js 파일 을 새로 만 듭 니 다:

import axios from 'axios'

export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
         alert('Api--ok');
        resolve(response.data);
      })
      .catch((error) => {
       console.log(error)
        reject(error)
      })
  })
}

export default {
 //            
 mineBaseMsgApi() {
   alert('  api.js')
  return fetch('/api/getBoardList');
 }
}

store 의 입구 파일 index.js 에서:

import Vue from 'vue'
import Vuex from 'vuex'

import mine from './modules/mine';

Vue.use(Vuex);

export default new Vuex.Store({
 modules: {
  mine
 }
});

배경 데 이 터 를 요청 하고 vuex 구성 요소 의 created 를 사용 하여 첫 번 째 dispatch 를 나 누 어 주 십시오:

created() {
  this.$store.dispatch('getMineBaseApi');
 }

그리고 store/modules 에 대응 하 는 모듈 js 파일 에서 제 가 사용 하 는 mine.js 파일 에서 state,action,mutation 을 작성 합 니 다.

import api from './../../fetch/api';
import * as types from './../types.js';

const state = {
 getMineBaseMsg: {
  errno: 1,
  msg: {}
 }
}

const actions = {
 getMineBaseApi({commit}) {
  alert('  action');
  api.mineBaseMsgApi()
  .then(res => {
    alert('action       axios  ');
    console.log('action       axios  ')
    commit(types.GET_BASE_API, res)
  })
 }
}

const getters = {
 getMineBaseMsg: state => state.getMineBaseMsg
}

const mutations = {
 [types.GET_BASE_API](state, res) {
  alert('  mutation');
  state.getMineBaseMsg = { ...state.getMineBaseMsg, msg: res.data.msg }
  alert('  mutations  state  ');
 }
}

export default {
 state,
 actions,
 getters,
 mutations
}

그리고 state 를 되 찾 으 려 는 구성 요소 에서 mapgetters 를 사용 하여 state 를 가 져 옵 니 다:

import { mapGetters } from 'vuex';

export default {
 ．．．
 computed: {
  ...mapGetters([
   'getMineBaseMsg'
  ])
 }，
 ．．．   
｝

그리고 콘 솔 에서 확인 하 세 요:
getter 와 mutation 은 모두 성공 하 였 으 며,동시에 저 는 state 를 제출 하 는 전체 과정 에 alert 를 추 가 했 습 니 다.전체 절차 가 어떻게 가 는 지 보 실 수 있 습 니 다.
이상 의 vue+vuex+axios 는 배경 에서 데 이 터 를 가 져 와 vuex 에 저장 합 니 다.구성 요소 간 에 데 이 터 를 공유 하 는 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.