vuex의 프로젝트 구조 및 구성 소개

이번에는 vuex의 프로젝트 구조와 구성에 대해 소개하겠습니다. vuex 프로젝트 구조와 구성 사용 시 주의사항은 무엇인가요?

우선, 다음은 공식 웹사이트에 있는 진지한 "조언"입니다:

vuex가 준수해야 하는 규칙:

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

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

3. 모든 비동기 로직은 action으로 캡슐화되어야 합니다.

파일디렉토리 구조

파일 간의 관계:

저장소 폴더 - vuex 시리즈 파일을 저장합니다

store.js - vuex 소개, 상태 데이터 설정, getter 소개, mutation 및 action

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를 통해 접근할 수 있습니다.

rreee

Getter.js의 간단한 구성(스토어의 속성을 계산하고 상태를 매개변수로 받음)

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

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

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

매개변수를 전달할 수 있는 getter 속성의 간단한 구성

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

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

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

mutation.js 간단한 구성:

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

트리거(구성 요소 내)

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

트리거(컴포넌트)

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue-cli 3.0.x webpack4로 업그레이드한 후 새로운 기능은 무엇입니까

JS는 JSON 배열에서 중복 제거 알고리즘을 어떻게 구현합니까?

위 내용은 vuex의 프로젝트 구조 및 구성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!