vue의 관리 모드 vuex에 대한 자세한 해석

이 글은 주로 Vue의 상태 관리 모델 vuex에 대한 심층적인 이해를 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고하겠습니다. 에디터를 따라가서 살펴보겠습니다.

vuex는 vue.js용으로 특별히 설계된 상태 관리 모드이며, devtools를 사용하여 디버깅할 수도 있습니다.

참고: 이 문서의 예제와 기타 코드에서는 es6 구문을 사용합니다.

링크

1. vuex 중국 공식 홈페이지

2. vue와 vuex를 이용해 구현한 간단한 참고용 쇼핑몰

vuex란?

vuex 공식 웹사이트의 첫 번째 인용문:

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 모델입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.

상태 관리 모드와 중앙 집중식 스토리지 관리는 언뜻 보면 매우 고급스럽고 무섭게 들립니다. 제 생각에는 vuex는 공유해야 하는 모든 변수를 객체에 저장한 다음 이 객체를 다른 구성 요소에서 사용할 수 있도록 최상위 구성 요소에 배치합니다. vue를 js 파일로, 컴포넌트를 함수로 생각하면 vuex는 전역 변수이지만 이 "전역 변수"에는 몇 가지 특정 규칙이 포함되어 있습니다.

Vue의 구성 요소 개발에서는 현재 구성 요소의 상태를 다른 구성 요소에 전달해야 하는 경우가 종종 있습니다. 상위 구성 요소와 하위 구성 요소 간에 통신할 때 일반적으로 props + Emit을 사용합니다. 그러나 통신 당사자가 부모-자식 구성 요소가 아니거나 관련 관계가 전혀 없거나 상태를 여러 구성 요소와 공유해야 하는 경우 매우 번거롭고 데이터를 유지 관리하기가 매우 어려울 수 있으며 이는 매우 비우호적입니다. 우리의 발전에. vuex는 현재로서는 매우 실용적이지만 vuex를 사용한 후에는 더 많은 개념과 프레임워크도 가져오므로 주의가 필요합니다!

vuex에는 무엇이 있나요?

Talk는 저렴합니다. 너무 많은 텍스트가 포함된 코드부터 시작해 보겠습니다.

const store = new Vuex.Store({
  state: {
    name: 'weish',
    age: 22
  },
  getters: {
    personInfo(state) {
      return `My name is ${state.name}, I am ${state.age}`;
    }
  }
  mutations: {
    SET_AGE(state, age) {
      commit(age, age);
    }
  },
  actions: {
    nameAsyn({commit}) {
      setTimeout(() => {
        commit('SET_AGE', 18);
      }, 1000);
    }
  },
  modules: {
    a: modulesA
  }
}

이것은 가장 기본적이고 완전한 vuex 코드입니다.

1. state: 보관상태. 즉, 변수

2. getters: 파생된 상태입니다. 즉, get in set 및 get에는 두 개의 선택적 매개변수인 state 및 getter가 있으며, 이는 각각 상태 및 기타 getter에서 변수를 얻을 수 있습니다. 외부 호출 방법: store.getters.personInfo(). 이는 vue의 계산된

3. mutations: 상태 수정 제출과 유사합니다. 즉, set 및 get에서 설정하는 것입니다. 이는 vuex에서 상태를 수정하는 유일한 방법이지만 비동기 작업을 지원하지 않습니다. 첫 번째 매개변수의 기본값은 상태입니다. 외부 호출 방법: store.commit('SET_AGE', 18). vue의 메소드와 유사합니다.

4. 동작: 돌연변이와 유사합니다. 그러나 작업은 비동기 작업을 지원합니다. 첫 번째 매개변수의 기본값은 상점과 동일한 매개변수 속성을 가진 객체입니다. 외부 호출 방법: store.dispatch('nameAsyn').

5. 모듈: store의 하위 모듈, 콘텐츠는 store의 인스턴스와 동일합니다. 호출 방법은 store.a.getters.xxx()와 같이 현재 하위 모듈 이름을 추가해야 한다는 점을 제외하면 이전에 소개된 방법과 유사합니다.

vue-cli에서 vuex를 사용하는 방법

일반적으로 실제 개발에서는 vue-cli를 사용하지만, 개발 방식과 호출 방식이 조금씩 다릅니다.

├── index.html
├── main.js
├── components
└── store
  ├── index.js     # 我们组装模块并导出 store 的地方
  ├── state.js     # 跟级别的 state
  ├── getters.js    # 跟级别的 getter
  ├── mutation-types.js # 根级别的mutations名称（官方推荐mutions方法名使用大写）
  ├── mutations.js   # 根级别的 mutation
  ├── actions.js    # 根级别的 action
  └── modules
    ├── m1.js     # 模块1
    └── m2.js     # 模块2

state.js 예:

const state = {
  name: 'weish',
  age: 22
};

export default state;

getters.js 예(상태를 직접 사용하는 대신 일반적으로 getter를 사용하여 상태를 가져옵니다.):

export const name = (state) => {
  return state.name;
}

export const age = (state) => {
  return state.age
}

export const other = (state) => {
  return `My name is ${state.name}, I am ${state.age}.`;
}

mutation-type.js 예(모든 변형을 사용합니다. 이 파일의 함수 이름):

export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';

mutations.js 예:

import * as types from './mutation-type.js';

export default {
  [types.SET_NAME](state, name) {
    state.name = name;
  },
  [types.SET_AGE](state, age) {
    state.age = age;
  }
};

actions.js 예(비동기 작업, 다중 커밋의 경우):

import * as types from './mutation-type.js';

export default {
  nameAsyn({commit}, {age, name}) {
    commit(types.SET_NAME, name);
    commit(types.SET_AGE, age);
  }
};

modules--m1.js 예(매우 복잡한 애플리케이션이 아닌 경우) , 일반적으로 모듈로 나누어지지 않습니다.):

export default {
  state: {},
  getters: {},
  mutations: {},
  actions: {}
};

index.js 예시(vuex 조립):

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';
import m1 from './modules/m1.js';
import m2 from './modules/m2.js';
import createLogger from 'vuex/dist/logger'; // 修改日志

vue.use(vuex);

const debug = process.env.NODE_ENV !== 'production'; // 开发环境中为true，否则为false

export default new vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    m1,
    m2
  },
  plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

마지막으로 vue 컴포넌트의 main.js

import store from './store/index.js';

new Vue({
 el: '#app',
 store,
 render: h => h(App)
});

에 스토어 인스턴스를 vue에 마운트합니다. 일반적으로 mapGetters, mapActions 및 mapMutations를 사용하고 vue가 메서드를 호출하고 계산하는 것과 동일한 방식으로 이러한 변수나 함수를 호출할 수 있습니다.

import {mapGetters, mapMutations, mapActions} from 'vuex';

/* 只写组件中的script部分 */
export default {
  computed: {
    ...mapGetters([
      name,
      age
    ])
  },
  methods: {
    ...mapMutations({
      setName: 'SET_NAME',
      setAge: 'SET_AGE'
    }),
    ...mapActions([
      nameAsyn
    ])
  }
};

위는 제가 모든 사람을 위해 컴파일한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JavaScript의 성능 최적화에 대한 자세한 해석

vue.js에서 로드되지 않는 기본 경로 문제에 대해

js를 사용하여 타임스탬프와 날짜 형식 간 변환하는 방법

Vue의 반응성 원칙(자세한 튜토리얼)

위 내용은 vue의 관리 모드 vuex에 대한 자세한 해석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!