Vue 와 Vuex 의 첫 접촉 으로 생 긴 구덩이 입 니 다.

Vue.js 프로젝트 에서 프로젝트 구조 가 간단 하면 부자 구성 요소 간 데이터 전달 을 사용 할 수 있 습 니 다.  props 나$emit 등 방식
https://www.jb51.net/article/110186.htm
그러나 대형 프로젝트 라면 하위 구성 요소 간 에 데 이 터 를 전달 해 야 하 는 경우 가 많아 이전 방식 을 사용 하 는 것 이 불편 하 다.Vue 의 상태 관리 도구 인 Vuex 는 이 문 제 를 완벽 하 게 해결 했다.
1.Vuex 설치 및 도입
프로젝트 구성:

우선 npm 로 Vuex 설치cnpm install vuex -S 
그리고 main.js 에 도입 합 니 다.

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 render: h => h(App)
})

2.핵심 창고 store.js 구축
Vuex 응용 상태 state 는 store.js 에 저장 해 야 합 니 다.Vue 구성 요 소 는 store.js 에서 상 태 를 얻 을 수 있 고 store 를 전역 변수의 창고 로 이해 할 수 있 습 니 다.
그러나 단순 한 전역 변수 와 약간의 차이 가 있다.주로 store 의 상태 가 바 뀌 면 해당 하 는 vue 구성 요소 도 효율적으로 업 데 이 트 될 수 있다.
src 디 렉 터 리 아래 vuex 디 렉 터 리 를 만 들 고 store.js 를 vuex 디 렉 터 리 아래 에 놓 습 니 다.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 //     
 state: {
 author: 'Wise Wrong'
 }
})
export default store

이것 은 가장 간단 한 store.js 입 니 다.그 안에 하나의 상태 author 만 저장 합 니 다.
main.js 에 Vue 와 Vuex 가 도 입 됐 지만 다시 한 번 도입 해 야 합 니 다.
3.구성 요소 에 상 태 를 표시 합 니 다.

<template>
 <footer class="footer">
 <ul>
  <li v-for="lis in ul">{{lis.li}}</li>
 </ul>
 <p>
  Copyright&nbsp;&copy;&nbsp;{{author}} - 2016 All rights reserved
 </p>
 </footer>
</template>
<script>
 export default {
 name: 'footerDiv',
 data () {
  return {
  ul: [
   { li: '    ' },
   { li: '    ' },
   { li: '    ' },
   { li: '    ' },
   { li: '    ' }
  ]
  }
 },
 computed: {
  author () {
  return this.$store.state.author
  }
 }
 }
</script>

이것 은 footer.vue 의 html 와 script 부분 입 니 다.
주로 computed 에서 this.$store.state.author 의 값 을 html 의 author 에 되 돌려 줍 니 다.
페이지 렌 더 링 후 author 의 값 을 가 져 올 수 있 습 니 다. 

4.구성 요소 에서 상태 수정
그리고 header.vue 에 입력 상 자 를 추가 하여 입력 상자 의 값 을 store.js 의 author 에 전달 합 니 다.
여기 서 저 는 Element-UI 를 스타일 링 프레임 으로 사 용 했 습 니 다.

위 에 입력 상자 input 의 값 을 inputTxt 로 연결 한 다음,뒤의 단추 button 에 click 이 벤트 를 연결 하여 setAuthor 방법 을 터치 합 니 다.

methods: {
　setAuthor: function () {
　　　this.$store.state.author = this.inpuTxt
　}
}

setAuthor 방법 에서 입력 상자 의 값 inputTxt 를 Vuex 의 상태 author 에 부여 하여 하위 구성 요소 간 데이터 전달 을 실현 합 니 다.

5.공식 적 으로 추천 하 는 상태 수정 방식
위의 예 는 setAuthor 에서 직접 할당 방식 으로 상태 author 를 수정 하 는 것 입 니 다.그러나 vue 는 다음 과 같은 방법 을 사용 하 는 것 을 공식 적 으로 추천 합 니 다.

먼저 store.js 에서 하나의 방법 을 정의 합 니 다 new Author.그 중에서 첫 번 째 매개 변 수 는 state 가$store.state 이 고 두 번 째 매개 변 수 는 msg 가 따로 들 어 와 야 합 니 다.
그리고 header.vue 의 setAuthor 방법 을 수정 합 니 다.
$store.commit 을 사용 하여 new Author 를 제출 하고 this.inputTxt 을 msg 에 전송 하여 author 를 수정 합 니 다.
이렇게 명시 적 으로 (commit) mutations 을 제출 하면 모든 상태의 변 화 를 잘 추적 할 수 있 기 때문에 대형 프로젝트 에서 두 번 째 방법 을 사용 하 는 것 을 추천 합 니 다.
총결산
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 Vue 와 Vuex 의 첫 접촉 으로 생 긴 구덩이 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!