vuex를 시작하는 단계에 대한 자세한 설명

이번에는 vuex를 시작하는 단계에 대해 자세히 설명하겠습니다. vuex를 시작하기 위한 주의사항은 무엇인가요?

머리말

이전 프로젝트에서 컴포넌트 간의 통신이 필요한 곳을 다소 접했지만 여러 가지 이유로
이벤트 버스의 비용이 vuex보다 높기 때문에 기술 선택 Vuex를 선택했는데 왜 그런지 모르겠습니다.
Vuex가 어렵다고 해서 팀에 새로 온 몇몇 사람들이 움츠러들기 시작했습니다.
오늘은 그 Vuex를 증명하기 위해 간단한 3단계를 사용합니다. 정말 간단합니다.

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

이것은 입문용 튜토리얼, 입문용 튜토리얼입니다. novices

0단계

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

1단계

이름과 위치에 관계없이 새 .js 파일을 생성하세요. 평소와 같이 /src/store 디렉터리에 생성하는 것이 좋습니다(그렇지 않은 경우 직접 생성하세요)

파일 위치/src/store/index.php 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()에 전달된 매개변수를 약간 변경합니다. 새 줄

파일 뒤에 메모가 있습니다. location/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: '<App/>'
})

팁: './store'에서 스토어 가져오기 뒤의 주소는 위에서 생성한 새 파일의 위치(/src/store/index.js)입니다,
여기는 index.js이므로 생략 가능합니다.

세 번째 단계

위 두 단계 실제로 vuex의 기본 구성을 완료했습니다. 다음 단계는

file location/src/main.js(또한 vue-cli.vue에서 생성된 앱입니다. 여기에서는 데모의 편의를 위해 중복 항목을 제거했습니다.) code)

<template>
 <p>
 {{getName}}
 <button @click="changeName" value="更名">更名</button>
 </p>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit('updateName')
 }
 }
}
</script>

이것은 매우 일반적인 vue 파일입니다. 차이점은 여기에서 저장소의 "데이터"를 가져오기 위해 계산된 속성을 사용해야 한다는 것입니다. 그리고 데이터를 변경하려면 더 이상 필요하지 않습니다. this.xxx = xxx를 사용하여 this.$store.commit('updateName')

Summary

위의 예에서 이 작업을 수행하는 것이 무엇을 의미하는지 vue의 데이터를 직접 사용하면 어떨까?

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

총 10개의 구성 요소 레이어가 중첩되어 있습니다. 하위 구성 요소에도 10개의 구성 요소 레이어가 있습니다.) 하위 하위 구성 요소가 있고, 하위 하위 구성 요소 아래에 하위 하위 하위 구성 요소가 있는 식으로 10개 레벨이 있습니다.)

그런 다음 마지막 레이어 구성 요소의 데이터가 변경되면 첫 번째 레이어 구성 요소에 알리고 싶을 때 this.$store.commit()에서

다음 가장 바깥쪽 구성 요소의 계산된 속성을 사용하여 해당 값을 얻으면 됩니다. 실시간 업데이트를 얻을 수 있습니다. 레이어별로 $emit까지 올라갈 필요가 없습니다.

이 기사의 사례를 읽었을 것이라고 생각합니다. 방법을 익힌 후 PHP 중국어의 다른 관련 기사를 주목하십시오. 더 흥미로운 콘텐츠를 위한 웹사이트!

추천 자료:

v-model을 사용하는 방법 및 vue 팝업 구성 요소 구현을 약속하는 방법

Vue를 사용하여 Axios 플러그인을 보조 캡슐화하는 방법

위 내용은 vuex를 시작하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!