vuex 프로젝트 구조 디렉토리 및 구성 사용법에 대한 자세한 설명

이번에는 vuex 프로젝트 구조 디렉토리 및 구성에 대한 자세한 설명을 가져오겠습니다. vuex 프로젝트 구조 디렉토리 및 구성 사용 시 주의 사항은 무엇입니까?

우선 공식 웹사이트의 진지한 "조언"이 있습니다:

vuex가 준수해야 할 규칙:

1 애플리케이션 수준의 상태는 단일 스토어에 집중되어야 합니다. 객체.

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

3. 비동기 논리는 action으로 캡슐화되어야 합니다.

File디렉터리 구조

파일 간의 관계:

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 옵션을 등록하면 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 지연 로딩으로 느린 첫 로딩 속도 세부 단계 해결

vue2.0 리소스 파일 자산 및 정적 사용 지침

라우터 사용에 대한 자세한 설명 각도 5.x

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