vue 상태 관리 모드 vuex
비고:본 논문 의 예제 등 코드 는 es6 의 문법 을 사용 할 것 입 니 다.
링크
vuex 홈 페이지 의 말 을 먼저 인용 합 니 다.
Vuex 는 Vue.js 응용 프로그램 을 위 한 상태 관리 모델 입 니 다.이 는 중앙 식 저장 관리 에 응 용 된 모든 구성 요소 의 상 태 를 사용 하고 해당 하 는 규칙 으로 상 태 를 예측 가능 한 방식 으로 변화 시 킵 니 다.
상태 관리 모드,집중 식 저장 관 리 는 듣 기만 해도 높 아 무섭다.내 가 보기에 vuex 는 공유 해 야 할 변 수 를 모두 한 대상 에 저장 한 다음 에 이 대상 을 최상 위 구성 요소 에 넣 어 다른 구성 요소 에 사용 하도록 하 는 것 이다.이렇게 말 하면 vue 를 js 파일,구성 요소 가 함수 라 고 생각 합 니 다.vuex 는 전역 변수 입 니 다.이'전역 변수'는 특정한 규칙 을 포함 하고 있 을 뿐 입 니 다.
vue 의 구성 요소 화 개발 에 서 는 현재 구성 요소 의 상 태 를 다른 구성 요소 에 전달 해 야 하 는 경우 가 많 습 니 다.부자 구성 요소 가 통신 할 때,우 리 는 보통 props+emit 라 는 방식 을 사용한다.그러나 통신 쌍방 이 부자 구성 요소 가 아니 라 전혀 관련 관계 가 없 거나 한 상태 에서 여러 구성 요소 에 공유 해 야 할 때 매우 번 거 롭 고 데이터 도 유지 하기 어 려 울 것 이다.이것 은 우리 개발 에 있어 서 매우 우호 적 이지 않다.vuex 는 이 럴 때 실 용적 이지 만 vuex 를 사용 한 후에 도 더 많은 개념 과 프레임 워 크 를 가 져 왔 으 니 신중 해 야 합 니 다!
vuex 안에 어떤 내용 이 있 습 니까?
Talk is cheap,Show me the code.먼저 코드 간격 으로 이렇게 많은 글 자 를 보 여 줍 니 다.
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
}
}
vue-cli 에서 vuex 를 사용 하 는 방식
일반적으로 우 리 는 vue-cli 를 이용 하여 실제 개발 을 하 는데 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
const state = {
name: 'weish',
age: 22
};
export default state;
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}.`;
}
export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';
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;
}
};
import * as types from './mutation-type.js';
export default {
nameAsyn({commit}, {age, name}) {
commit(types.SET_NAME, name);
commit(types.SET_AGE, age);
}
};
export default {
state: {},
getters: {},
mutations: {},
actions: {}
};
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
});
import store from './store/index.js';
new Vue({
el: '#app',
store,
render: h => h(App)
});
import {mapGetters, mapMutations, mapActions} from 'vuex';
/* script */
export default {
computed: {
...mapGetters([
name,
age
])
},
methods: {
...mapMutations({
setName: 'SET_NAME',
setAge: 'SET_AGE'
}),
...mapActions([
nameAsyn
])
}
};
이상 은 vuex 에 관 한 지식 입 니 다.사실 vuex 는 간단 합 니 다.몇 번 더 사용 하면 익숙해 집 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
