vuex 모듈을 나누면state의 값을 얻을 수 있습니다
생각:
1. 네임스페이스를 통한 값 - this.$store.state.car.list//OK
2. 이 속성을 정의하는 getter 방법을 통해 방법이 전역적으로 등록되어 이름 공간이 존재하지 않기 때문에this를 통해 직접 호출할 수 있습니다.
this.$store.state.car.carGetter
저는 카 모듈에서state,getters를 정의했습니다.
this.$store.state.car.목록은 값을 받을 수 있습니다.
하지만,this.$store.state.car.carGetter 오류,
저기요.구성 요소에서 이 getters를 호출하는 방법,
//car.js
state = {
list: []
}
getters = {
carGetter: state => {
return state.list.filter('');
}
}
new Vuex.Store({
getters: {
test: state => {
return '02';
}
},
modules: { car }
})
//
this.$store.state.car.list // OK
this.$store.state.car.carGetter // undefined
this.$store.state.carGetter // ok, getters root ?모듈 내부의action,mutation,getter는 현재 전역 이름 공간에 등록되어 있습니다. 이렇게 하면 여러 모듈이 같은mutation이나action에 응답할 수 있습니다.
보충 지식: vuex 모듈을 사용할 때state의 데이터 문법 얻기
일반 문법
this.$store.state.[어느 데이터]
모듈식 구문:
this.$store.state.[어느 모듈].[어느 데이터]
<template>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title"> </h4>
</div>
<div class="panel-body">
<p v-if="!CartList.length"> ， 。</p>
<CartListItem v-for="ele in CartList" :key="ele.id" :cartlist-iteam="ele"/>
</div>
<div class="panel-footer">
<a href="" class="btn btn-block btn-danger"> （{{cartQuantity}}）</a>
<a href="" class="btn btn-block btn-info"> （{{cartTotal}}）</a>
</div>
</div>
</template>
<script>
import CartListItem from './CartListItem'
import { mapGetters } from 'vuex'
export default {
name: 'CartList',
components: {
CartListItem
},
computed: {
CartList () {
return this.$store.state.cartModule.updateCartList
},
...mapGetters(['cartQuantity', 'cartTotal'])
}
}
</script>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vuex의 템플릿 리터럴 유형TypeScript 4.1은 템플릿 리터럴 유형을 도입했습니다. 언뜻 보기에는 별로 흥미롭게 들리지 않습니다. 다른 유형을 기반으로 하는 리터럴 유형의 조합을 만들 수 있습니다. 그러나이 기능이 매우 유용한 경우가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
