vuex 프로젝트 구조 디렉토리 및 구성을 사용하는 방법

이번에는 vuex 프로젝트 구조 디렉토리 및 구성 사용법을 보여드리고, vuex 프로젝트 구조 디렉토리 및 구성 사용 시 주의사항은 무엇인지 살펴보겠습니다.

vuex가 준수해야 하는 규칙:

1. 애플리케이션 수준 상태는 단일 저장소 개체에 집중되어야 합니다.

2. 상태를 변경하는 유일한 방법은 변형을 제출하는 것이며 이 프로세스는 동기식입니다.

3. 비동기 로직은 액션으로 캡슐화되어야 합니다.

파일 디렉터리 구조

파일 간의 관계:

store 폴더 - 일련의 vuex 파일 저장

store.js - vuex 소개, 상태 데이터 설정, getter, 변형 및 작업 소개

getter .js - 스토어에서 상태 가져오기

mutation.js - 스토어에서 상태를 변경하는 데 사용되는 함수의 저장 장소

action.js - 상태를 완곡하게 수정하기 위해 돌연변이를 제출하면 비동기식으로 작동할 수 있습니다

간단하고 일반

store.js 파일 작성 방법:

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
 a: '初始值',
 b: 'balabala...'
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

main.js 파일(라우터 주입과 마찬가지로 루트 구성 요소에서 저장소 주입):

루트 인스턴스에 store 옵션을 등록하면 저장소 인스턴스가 주입됩니다. 그 아래의 모든 하위 구성 요소의 루트 구성 요소이며 하위 구성 요소는 this.$store를 통해 액세스할 수 있습니다.

import store from './store/index'
new Vue({
 el: '#app',
 router,
 store,
 ...
})

Getter.js의 간단한 구성(스토어의 계산된 속성, 상태를 매개변수로 허용)

export default {
  doneTodos: state = >{
   return state.todos.filter(todo = >todo.done)
  }
}

Get(구성 요소의 계산된 속성 내부):

computed: {
 doneTodosCount () { 
  return this.$store.getters.doneTodosCount 
 }
}

통과 가능한 getter 속성의 간단한 구성

export default{
 getTodoById: (state) => (id) => { 
  return state.todos.find(todo => todo.id === id) 
 }
}

Get( 계산됨 컴포넌트의 속성(내부):

computed: {
 getTodoById() { 
  return this.$store.getters.getTodoById(‘参数')
 }
}

mutation.js 간단한 구성:

export default {
  increment(state) {
   //变更状态
   state.count++
  }
}

트리거(컴포넌트 내)

this.$store.commit(state,payload)
actions.js简单配置：
export default{
 action (context) {
 //异步操作
  setTimeout（（）=>{
   //变更状态
   context.commit('mutationFunName'，value)
  }）
 }
}

트리거(컴포넌트 내)

this.$store.dispatch('mutationFunctionName')
2018-04-07 18:13:34

이 글의 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. , 그리고 더 흥미로운 일들이 있을 것입니다. PHP 중국어 웹사이트에서 다른 관련 기사도 주목해 주세요!

추천 자료:

vue-router 지연 로딩으로 로딩 속도 최적화

JS는 createElement()를 사용하여 HTML을 동적으로 추가

위 내용은 vuex 프로젝트 구조 디렉토리 및 구성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!