집 > 기사 > 웹 프론트엔드 > 간단한 Vuex 및 모듈화 알아보기

간단한 Vuex 및 모듈화 알아보기

小云云원래의: 2018-01-16 09:18:251656검색

Vuex는 단일 상태 트리의 사용을 강조합니다. 즉, 프로젝트에는 저장소가 하나만 있습니다. 이 저장소는 프로젝트의 모든 데이터와 데이터에 대한 작업을 중앙에서 관리합니다. 그러나 이로 인해 발생하는 문제는 저장소가 매우 비대해지고 유지 관리가 어려울 수 있으므로 상태 트리를 모듈로 분할해야 한다는 것입니다.

예제 튜토리얼

예제는 vue-cli를 기반으로 작성되었습니다. 다음은 src 파일 아래의 콘텐츠 디렉터리입니다.

├── App.vue
├── components // 组件文件夹
│ ├── tab1.vue
│ ├── tab2.vue
│ ├── tab3.vue
│ └── tab4.vue
├── main.js // vue的主文件入口
├── router // vue-router文件
│ └── index.js
└── store // vuex文件
 ├── action.js // action
 ├── getter.js // getter
 ├── index.js // vuex的主文件
 ├── module // 模块文件
 │ ├── tab2.js
 │ └── tab3.js
 ├── mutation-type.js // mutation常量名文件
 └── mutation.js // mutation

효과는 이렇습니다(단순함을 싫어하지 마세요)

이 예시에서는 모듈 관련 지식을 포함하여 문서에 언급된 모든 vuex 관련 지식을 기본적으로 사용했습니다. 사용 시나리오는 다음과 같습니다. 모두 덮여 있습니다.

더 이상 말도 안 되는 소리는 그만하고 시작해 보세요.

우선 app.vue와 router는 라우팅과 관련되어 있으며, 문서를 보면 매우 간단하게 이해할 수 있습니다.

vuex의 모듈화

이 예제를 작성하기 전에는 오픈 소스 프로젝트 코드를 많이 읽었습니다. 결국 vuex는 이전 프로젝트에서 깊이 사용되지 않았습니다. vuex가 포함된 js입니다. 기능은 모두 완성되었지만 프로젝트가 복잡하다면 절대 이렇게 작성할 수 없습니다. 지금은 이에 대한 수요가 있으므로 이에 대한 아이디어를 명확히하기 위해 예제를 작성하고 싶었습니다. 결과는 매우 간단합니다.

스토어 파일의 콘텐츠는 vuex의 5가지 핵심 개념에 따라 구축되었습니다. 이렇게 하면 비즈니스 로직을 정리하고 mutation.js 및 mutation-type.js와 같은 향후 유지 관리에 매우 편리합니다.

// mutation-type.js

const CHANGE_COUNT = 'CHANGE_COUNT';


export default {
 CHANGE_COUNT
}

// mutation.js

import type from './mutation-type'

let mutations = {
 [type.CHANGE_COUNT](state) {
 state.count++
 }
}

export default mutations

Mutation에 있는 메소드 이름을 상수로 추출하여 별도의 파일에 넣어두고, 사용할 때 관련 내용을 인용해 보면 어떤 메소드가 존재하는지 관리하고 이해하기가 매우 쉽고 매우 직관적입니다. 반면에 때로는 작업을 사용해야 할 수도 있습니다. 동일한 메서드 이름을 사용하고 상수 파일을 도입하면 됩니다.

// action.js
import type from './mutation-type'

let actions = {
 [type.CHANGE_COUNT]({ commit }) {
 
 commit(type.CHANGE_COUNT)
 
 }
}

export default actions

어때요, 파일로 쓰는 것만큼 지저분해 보이지는 않네요.

...mapGetters 및...mapActions

tab1.vue:

// tab1.vue
<template>
 <p>
 <p>这是tab1的内容</p>
 <em @click="add">{{count}}</em>
 <p>getter:{{NewArr}}</p>
 </p>
</template>


<script>
import { mapActions, mapGetters } from "vuex";
import type from "../store/mutation-type";
export default {
 computed: {
 ...mapGetters([
 'NewArr'
 ]),
 count: function() {
 return this.$store.state.count;
 },
 },
 methods: {
 ...mapActions({
 CHANGE_COUNT: type.CHANGE_COUNT
 }),
 add: function() {
 this.CHANGE_COUNT(type.CHANGE_COUNT);
 }
 }
};
</script>

<style lang="" scoped>

</style>

index.js 파일:

import Vuex from 'vuex'
import Vue from 'vue'
import actions from './action'
import mutations from './mutation'
import getters from './getter'
import tab2 from './module/tab2'
import tab3 from './module/tab3'

Vue.use(Vuex)

let state = {
 count: 1,
 arr:[]
}


let store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions,
 modules:{
 tab2,tab3
 }
 
})

export default store

vuex는 보조 기능이라는 기능을 제공하며 그 이점을 통해 페이지 초점 사용해야 할 몇 가지 사항을 표시하고 사용할 때 내용을 적게 작성할 수도 있지만 꼭 필요한 것은 아니며 필요에 따라 사용하면 됩니다.

효과가 나타나는 장소가 다르다는 점에 유의해야 합니다.

...mapGetter는 이 페이지의 계산된 속성에 작성되며, 계산된 속성을 사용하는 것처럼 getter의 콘텐츠를 사용할 수 있습니다.

...mapActions는 이 페이지의 메소드로 작성됩니다. 다음과 같이 다른 메소드로 호출하거나 @click에서 직접 작성할 수도 있습니다.

<em @click="CHANGE_COUNT">{{count}}</em>

Jiang Zi, tab1의 숫자는 매번 1씩 증가합니다. 가 클릭되었습니다.

mudule

vuex의 문서에는 모듈에 대한 내용이 모호하므로 직접 사용해야 합니다.

이 예에서는 동일한 이름을 가진 두 구성 요소에 해당하는 두 개의 모듈(tab2 및 tab3)을 설정했습니다. 물론 단지 테스트를 위해 이 작업을 수행한 것입니다.

// module/tab2.js
const tab2 = {
 state: {
 name:`这是tab2模块的内容`
 },
 mutations:{
 change2(state){
  state.name = `我修改了tab2模块的内容`
 }
 },
 getters:{
 name(state,getters,rootState){
  console.log(rootState)
  return state.name + ',使用getters修改'
 }
 }
}

export default tab2;

// tab2.vue
<template>
 <p>
 <p>这是tab2的内容</p>
 <strong @click="change">点击使用muttion修改模块tab2的内容：{{info}}</strong>
 <h4>{{newInfo}}</h4>
 </p>
</template>


<script>
export default {
 mounted() {
 // console.log(this.$store.commit('change2'))
 },
 computed: {
 info: function() {
 return this.$store.state.tab2.name;
 },
 newInfo(){
 return this.$store.getters.name;
 }
 },
 methods: {
 change() {
 this.$store.commit('change2')
 }
 }
};
</script>

<style lang="" scoped>

</style>

이 예에서는 페이지의 모듈에 명시된 호출 방법을 주로 살펴봅니다.

먼저 상태에 대해 이야기해 보겠습니다. 페이지에 다음과 같이 작성하면 됩니다.

this.$store.steta.tab2(模块名).name

Console $store in 이 페이지에서 stete가 상태에 중첩된 레이어를 추가하는 것을 볼 수 있습니다.

액션, 뮤테이션, 게터는 일반적인 사용법과 동일하며 차이가 없습니다.

또한 getter와 action에서는 rootState를 통해 루트 구조의 상태를 얻을 수 있습니다.

간단한 Vuex 및 모듈화 알아보기

관련 기사