vuex 관리 상태 창고 사용 설명
Vuex 는 Vue.js 응용 프로그램 을 위 한 상태 관리 모델 입 니 다.이 는 중앙 식 저장 관리 에 응 용 된 모든 구성 요소 의 상 태 를 사용 하고 해당 하 는 규칙 으로 상 태 를 예측 가능 한 방식 으로 변화 시 킵 니 다.Vuex 도 Vue 의 공식 디 버 깅 도구devtools extension에 통합 되 어 0 설정 의 time-travel 디 버 깅,상태 스냅 샷 가 져 오기 내 보 내기 등 고급 디 버 깅 기능 을 제공 합 니 다.전역 단일 모드 를 사용 하여 구성 요소 의 공유 상 태 를 추출 하여 관리 하여 구성 요소 트 리 의 모든 위치 에서 공 유 된 상태 나 트리거 행 위 를 가 져 올 수 있 습 니 다.
그러면 상 태 는 무엇 입 니까?vuex 를 사용 하지 않 았 을 때 현재 구성 요소 에서 data 에서 공유 해 야 할 데 이 터 를 상태 로 이해 합 니 다.
『8195』vuex 는 상태 나 행 위 를 공유 하 는 상태 로 만 들 었 고 공 유 된 상태 나 행 위 는 각 구성 요소 에서 접근 할 수 있 으 며 하위 또는 하위 간 전달 변 수 를 줄 이 고 개발 효율 을 높 였 다.
2.vuex 를 사용 하지 않 을 때 와 vuex 를 사용 할 때의 차이
『8195』우리 가 vuex 를 사용 하지 않 을 때 구성 요소 간 에 정 보 를 전달 하 는 것 이 비교적 번 거 로 울 수 있 습 니 다.
vuex 를 사용 하지 않 을 때 부자 간 에 메 시 지 를 전달 합 니 다:
App.vue 파일 중:
<template>
<div id="app">
<Fruits :fruitList="fruitList"/>
</div>
</template>
<script>
import Goods from './components/Goods';
export default {
name: 'App',
components:{
Fruits,
Goods
},
data(){
return{
goodList:[
{
name:'doll',
price:12
},
{
name:'glass',
price:10
}
],
}
}
}
</script>
<style>
</style>
<template>
<div class="hello">
<ul>
<li v-for="(good,index) in goodList" :key="index">
name:{{good.name}} number: {{good.number}} {{index}}
</li>
</ul>
</div>
</template>
<script>
export default {
props:['goodList'],
}
</script>
<style>
</style>
먼저 두 형제 간 에 전송 되 는 단추 로 js 파일 을 만 듭 니 다.여기 서 msg.js 라 고 이름 을 지 었 습 니 다.
// vue
import Vue from 'vue';
export default new Vue
<template>
<div>
<button @click="deliver"> </button>
</div>
</template>
<script>
import MSG from '../msg';
export default {
data(){
return{
msg:'hahah'
}
},
methods:{
deliver() {
MSG.$emit('showMsg',this.msg)
}
}
}
</script>
<style>
</style>
<template>
<div>
<button @click="deliver"> </button>
</div>
</template>
<script>
import MSG from '../msg';
export default {
data(){
return{
msg:'hahah'
}
},
methods:{
deliver() {
MSG.$emit('showMsg',this.msg)
}
}
}
</script>
<style>
</style>
버튼 클릭:
상술 한 형제 구성 요소 간 의 전송 값 은 좀 번 거 롭 지 않 습 니까?vue 구성 요소 의 값 을 처음 배 웠 을 때,나 도 이런 방법 이 매우 번거롭다 고 느 꼈 다.vuex 는 이 문 제 를 잘 해결 하고,즐겁게 코드 를 작성 했다.
vuex 공유 상태 데이터 사용
store.js 설정:
import Vue from 'vue'; // vue
import Vuex from 'vuex'; // vuex
Vue.use(Vuex) // Vuex
const state = {
count:1,
totalName:'total'
}
const store = new Vuex.Store({
state
})
export default store
<template>
<div id="app">
<Fruits>
<div>--------------------------</div>
<Goods>
</div>
</template>
<script>
import Fruits from './components/Fruits';
import Goods from './components/Goods';
export default {
name: 'App',
components:{
Fruits,
Goods
}
}
</script>
<style>
</style>
<template>
<div>
<div> Goods </div>
<div> :{{this.count}}</div>
<div> {{this.totalName}} </div>
</div>
</template>
<script>
import {mapState} from 'vuex'; //
export default {
computed:{
...mapState(['count','totalName']) //
}
}
</script>
<style>
</style>
<template>
<div>
<div> Fruits </div>
<div> :{{this.count}}</div>
<div> {{this.totalName}} </div>
</div>
</template>
<script>
import {mapState} from 'vuex'; //
export default {
computed:{
...mapState(['count','totalName']) //
}
}
</script>
<style>
</style>3.vuex 의 사용
vuex 설치
터미널 을 열 고 명령 행
npm install vuex --save을 입력 하여 vuex 를 다운로드 합 니 다.
vuex 의 핵심 개념:
모듈 서브 모듈 화 관리
하위 모듈 관리 에 있어 서 핵심 화 된 관리 대상 store 를 만들어 index.js 라 고 이름 을 지어 다른 state,getter,mutations,actions 를 만들어 야 합 니 다.이 store 모듈 에 도입 하여 store 대상 을 노출 시 키 고 다음은 코드 부분 입 니 다.
모듈 구조
vuex 응용 핵심 관리 창고 store
다음 에 store 코드 입 니 다.여기 있 는 js 는 index.js 라 고 이름 을 지 었 습 니 다.state,mutations,actions,getters 를 store 에 도입 하여 store 대상 을 드 러 냅 니 다.
/*
vuex store
*/
import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
//
Vue.use(Vuex)
//new Vuex , state,mutation,action,getters vuex store ,
export default new Vuex.Store({
state,
mutations,
actions,
getters,
})
우 리 는 일반적으로 관리 해 야 할 공유 데 이 터 를 state 에 넣 어 전역 변수 처럼 보이 게 하고 필요 한 구성 요소 에 대해 이 state 상태 데 이 터 를 도입 합 니 다.다음은 state 의 코드 예:
/*
*/
export default{
userInfo: {}, //
count:1
}
*8195°mutations 이벤트 형식 대신 상수 로 사용 하 는 것 은 흔히 볼 수 있 는 모델 입 니 다.이 상수 들 을 하나의 단독 파일 에 넣 으 면 코드 합작 자 들 이 코드 에 대해 한눈 에 알 수 있 고 코드 의 읽 기 가능성 을 강화 할 수 있 습 니 다.아래 의 위의 코드 는 예 일 뿐 이 므 로 이 때 는 한 가지 방법 만 도입 되 었 다.
/*
n mutation type
*/
export const RECEIVE_USER_INFO = 'receive_user_info' // 『8195』actions 는 mutations 와 유사 하지만 비동기 작업 을 할 수 있 으 며,비동기 작업 으로 얻 은 데 이 터 를 mutations 에 제출 하여 mutations 가 state 의 상태 데 이 터 를 변경 할 수 있 습 니 다.ajax 요청 의 데 이 터 를 가 져 오고 가 져 온 데 이 터 를 mutations 에 제출 하여 state 데이터 상 태 를 업데이트 하 는 데 자주 사 용 됩 니 다.ajax 에서 요청 한 코드 를 보 냅 니 다.여 기 는 프 리 젠 테 이 션 을 하지 않 습 니 다.이 때 action 의 데 이 터 는 ajax 요청 을 보 내 서 얻 으 면 됩 니 다.이때 도 actions 에서 비동기 작업 을 할 수 있 음 을 나 타 낼 수 있다.아래 코드:
/*
mutation state
*/
import {
RECEIVE_USER_INFO, // mutation-types
} from './mutation-types';
import {
reqUserInfo,
} from '../api'; // ajax
export default{
//
async getUserInfo({commit}){
// , ， result
const result = await reqUserInfo()
// ，result.code 0， 1，
if (result.code === 0) {
const userInfo = result.data //
// commit ， mutation
commit(RECEIVE_USER_INFO,{userInfo})
}
}
}
this.$store.dispatch('getUserInfo')
*8195.mutations 는 state 의 상태 논 리 를 변경 하고 state 의 상태 데 이 터 를 동기 화하 기 위해 사용 합 니 다.알 아야 할 것 은 vuex 에서 mutation 을 통 해 state 대상 을 수정 할 수 있 고 actions 를 통 해 얻 은 데 이 터 를 가 져 와 state 를 수정 할 수 있 으 며 mutations 모듈 에서 상태 데 이 터 를 직접 정의 할 수 있 습 니 다.mutations 와 위의 actions 모듈 을 통 해 commt 는 mutation 모듈 에 사 용 된 것 임 을 알 수 있 습 니 다.구성 요소 에서 mutation 모듈 의 코드 를 다음 과 같이 호출 합 니 다.
this.$store.commit('increment')
/*
state
*/
import {
RECEIVE_USER_INFO,
} from './mutation-types';
export default{
// state, ，
mutation (playload)
[RECEIVE_USER_INFO](state,{userInfo}){
state.userInfo = userInfo
},
// actions mutation state
increment(state){
state.count = 3
}
}
Getters 는 computed 계산 속성 에 해당 하 며 state 상태 데 이 터 를 가공 처리 하 는 데 사 용 됩 니 다.두 개의 기본 매개 변 수 는 state 이 고 두 번 째 기본 매개 변 수 는 getters 입 니 다.
구성 요소 에서 이 방법 을 호출 하 는 코드 세 션 은:
this.$store.getters.totalCount()
/*
state getter
*/
export default{
plusCount(state){
return state.count + 1
},
// state ， getters plusCount
totalCount(state,getters){
return getters.plusCount + state.count
}
}
this.$store.state this.$store.getters.xxx이 귀 찮 지 않 을 까?state 와 getters 를 도입 하 는 또 다른 방식 을 소개 합 니 다.보조 함수 mapState 와 mapGetters
상술 한 state 와 getters 를 인용 하 는 방법 에 대해 귀 찮 지 않 습 니까?맵 스테이 트 를 사용 하면 편리 함 을 느 낄 수 있 습 니 다.
//
import { mapGetters,mapState } from 'vuex'
export default {
computed: {
// getter computed
...mapGetters(['plusCount','totalCount',])
// state computed
...mapState(['userInfo','count'])
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vuex Store를 크게 단순화하는 방법상태가 예측 가능한 방식으로만 변경될 수 있도록 하는 규칙을 사용하여 응용 프로그램의 모든 구성 요소에 대한 중앙 집중식 저장소 역할을 합니다. Factory Core Framework 애플리케이션의 모든 애플리케이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
