이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
vue-cli 3.0.x webpack4로 업그레이드한 후 새로운 기능은 무엇입니까
JS는 JSON 배열에서 중복 제거 알고리즘을 어떻게 구현합니까?
위 내용은 vuex의 프로젝트 구조 및 구성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!