Vuex 소개

간단한 3단계를 통해 누구나 VUEX를 빠르게 시작할 수 있습니다. 이 글에서는 VUEX의 가장 기본적인 기능과 관련 지식 포인트도 소개합니다.

머리말

이전 프로젝트에서 컴포넌트 간의 통신이 필요한 곳을 다소 접했지만 여러 가지 이유로
event 버스의 비용이 vuex보다 높기 때문에. 기술 선택 Vuex를 선택했는데 이유를 모르겠습니다.
Vuex에 대해 듣고 움츠러드는 사람들도 있습니다. Vuex가 정말 어렵기 때문이죠.
오늘은 간단한 3단계를 사용하여 증명해볼까요? that vuex 정말 간단합니다.

순전히 개인적인 경험이므로 부정확한 부분이 있으면 수정해 주세요!

이것은 입문용 튜토리얼입니다. 초보자를 위한 레벨 튜토리얼

파트 0 단계

새 vue 프로젝트를 만들고 vuex를 설치합니다. 여기서는 너무 많은 소개를 하지 않겠습니다. 클릭하면 기본적으로 이러한 기술을 갖게 됩니다 ^_^

1단계

이름을 가진 새 .js 파일 만들기 위치는 임의적입니다. 평소와 같이 /src/store 디렉터리에 있는 것이 좋습니다(없으면 직접 만드세요). )

파일 위치/src/store/index.js

// 引入vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 这里需要use一下,固定写法,记住即可
Vue.use(Vuex)

// 直接导出 一个 Store 的实例
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
 name: 'oldName'
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
 updateName (state) {
  state.name = 'newName'
 }
 }
})

코드가 좀 더 낯설어 보이지만, 일반적인 vue와 크게 다르지는 않네요. 두 번째 단계는 위 파일을 가져오고 새 Vue()에 전달된 매개변수를 약간 변경하는 것입니다.

파일 위치/src/main.js (vue-cli가 자동으로 입구를 생성해줍니다. 스캐폴딩 없이 할 수 있다면 따로 설명할 필요가 없습니다.)

import Vue from 'vue'
import App from './App'
import vuexStore from './store' // 新增

new Vue({
 el: '#app',
 store:vuexStore     // 新增
 components: { App },
 template: &#39;<App/>&#39;
})

Tip: import store 뒤에 있는 주소 './store'는 위에서 만든 새 파일(/src/store/index.js)의 위치입니다.

여기에는 index.js가 있으므로 생략해도 됩니다.

세 번째 단계

위의 2단계는 실제로 vuex의 기본 구성을 완료했으며 다음 단계는

파일 위치/src/main .js를 사용하는 것입니다(vue-cli에서 생성한 app.vue이기도 합니다. 시연의 편의를 위해) , 중복 코드를 제거했습니다)

<template>
 <p>
 {{getName}}
 <button @click="changeName" value="更名">更名</button>
 </p>
</template>

<script>
import HelloWorld from &#39;./components/HelloWorld&#39;

export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit(&#39;updateName&#39;)
 }
 }
}
</script>

이것은 매우 일반적인 vue 파일입니다. 여기서는 계산된 속성을 사용하여 저장소의 "데이터"를 가져옵니다

또한 원하는 경우 데이터를 변경하려면 더 이상 this.xxx = xxx를 사용하지 않고 this.$store.commit('updateName')

Summary

위 예의 의미가 무엇이라고 생각할 수도 있나요? 그냥 vue의 데이터와 메소드를 사용하면 안되나요?

위의 예는 vuex 사용 방법을 간략하게 설명하기 위한 것이므로 일부 프로세스가 단순화되었습니다. 다음과 같은 페이지가 있다고 상상해 보세요.

10개의 구성 요소 레이어가 중첩되어 있습니다. 전체적으로(즉, 하위 구성 요소 내부에 하위 하위 구성 요소가 있고 하위 하위 구성 요소 아래에 하위 하위 구성 요소가 있는 식으로 10개 레이어에 대해)
그런 다음 마지막 레이어 구성 요소에는 데이터 변경됨, 첫 번째 레이어 구성 요소에 알리고 싶을 때 맨 아래 레이어 구성 요소

에서 this.$store.commit()만 수행한 다음 가장 바깥쪽 구성 요소에서 계산된 속성을 사용하면 됩니다. 해당 값을 실시간 업데이트합니다. $emit 레이어를 거칠 필요가 없습니다.

마침내

원래는 getter, 액션+디스패치, 모듈화 등을 확장하고 싶었지만 순서대로 이 타이틀에 걸맞게.

VUEX 고급 지식 포인트 정리

위 내용은 모두의 학습에 도움이 되기를 바랍니다.

관련 추천:

VUE에서 v-bind 사용법 소개

vue 코딩 스타일을 vscode에서 통합하는 방법 소개

위 내용은 Vuex 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!