간단한 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()에 전달된 매개변수를 약간 변경하는 것입니다.
import Vue from 'vue' import App from './App' import vuexStore from './store' // 新增 new Vue({ el: '#app', store:vuexStore // 新增 components: { App }, template: '<App/>' })
여기에는 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 './components/HelloWorld' export default { computed:{ getName(){ return this.$store.state.name } }, methods:{ changeName () { this.$store.commit('updateName') } } } </script>
또한 원하는 경우 데이터를 변경하려면 더 이상 this.xxx = xxx를 사용하지 않고 this.$store.commit('updateName')
Summary위 예의 의미가 무엇이라고 생각할 수도 있나요? 그냥 vue의 데이터와 메소드를 사용하면 안되나요? 위의 예는 vuex 사용 방법을 간략하게 설명하기 위한 것이므로 일부 프로세스가 단순화되었습니다. 다음과 같은 페이지가 있다고 상상해 보세요.
10개의 구성 요소 레이어가 중첩되어 있습니다. 전체적으로(즉, 하위 구성 요소 내부에 하위 하위 구성 요소가 있고 하위 하위 구성 요소 아래에 하위 하위 구성 요소가 있는 식으로 10개 레이어에 대해)
그런 다음 마지막 레이어 구성 요소에는 데이터 변경됨, 첫 번째 레이어 구성 요소에 알리고 싶을 때 맨 아래 레이어 구성 요소
원래는 getter, 액션+디스패치, 모듈화 등을 확장하고 싶었지만 순서대로 이 타이틀에 걸맞게.
관련 추천:
vue 코딩 스타일을 vscode에서 통합하는 방법 소개
위 내용은 Vuex 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!