이번에는 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를 통해 접근할 수 있습니다.
rreeeGetter.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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
PHP의 반복자 인터페이스 Iterator를 사용하는 방법
php zip 패키지의 내용을 지정된 디렉터리에 압축을 푸는 자세한 단계
위 내용은 프로젝트 디렉토리 소개 및 vuex 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!