VUEX 를 위한 mapState/...mapState 등 값 추출 문제

페이지를 발견한this.$가 있습니다.store, 보통 정상이지만, 항상 몇 번, 당신의 페이지 오류의 원흉이 됩니다!,그것은 사실 vue의 생명주기와 관련이 있는 것 외에도store의 수치 추출 방식과 관련이 있다. 다음은 신대륙의 맵State 맵 Mutations 맵 Getters의 사용을 설명한다.
간단하게 말하자면mapState에 대한 나의 이해는 store에서state의 값을 두루 훑어보는 것이다. 네가 사용하든지this.$를 쓰지 않아도 된다.store.getters.getState.openId 등 이렇게 긴 수치를 찾았는데, 같은 이치로mapMutations mapGetters도store에 대응하는 mutations getters 방법을 두루 훑어보았다
아래에 코드를 올려 구체적으로 어떻게 조작하는지 보자
store.js 코드

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 showLoading0: true,
 showLoading1: true,
 showLoading2: true,
 showLoading3: true,
 //  ......
 showLoading9: true,
 },
 // getters  ， state 
 getters: {
 getStore (state) {
  return state
 }
 },
 //  state
 mutations: {
 updateLoading (state, showLoading) {
  state.showLoading = showLoading
 }
 },
 actions: {

 }
})

원래 vue의 코드

<script>
export default {
 data() {
 return {
  showLoading0: this.$store.getters.getStore.showLoading0,
  showLoading1: this.$store.getters.getStore.showLoading1,
  showLoading2: this.$store.getters.getStore.showLoading2,
  showLoading3: this.$store.getters.getStore.showLoading3,
  //  ......
  showLoading9: this.$store.getters.getStore.showLoading9
 }
 },
 methods: {
 updateLoading() {
  this.$store.commit('updateLoading', false)
 }
 }
}
</script>

약한 사람한테 물어봐, 네 발의 이this.$store 귀찮아, 이게 열 개의 값이 있으면, 심지어 가지런한 열 개의this.$까지 볼 수 있어.store... 아이고, 무섭다. 이때 맵스테이트의 용도가 왔다. 코드를 봐라.

<script>
//  vuex mapXXX 
import { mapState } from 'vuex'
export default {
 data() {
 return {
  showLoading0: (state) => state.showLoading0
  showLoading1: (state) => state.showLoading1
  showLoading2: (state) => state.showLoading2
  showLoading3: (state) => state.showLoading3
  //  ......
  showLoading9: (state) => state.showLoading9
 }
 }
}
</script>

마음에 안 든다면서요?그럼 밑에 있는 줄임말 좀 봐요, 자신의 방법에 어리석게 울지 마세요~

//  vuex mapXXX 
import { mapState } from 'vuex'
export default {
 //data() {
 // return {
 // }
 //}
 //  ， data ， computed, data ~
 // <h1 v-if="showLoading0">{{showLoading1}}</h1>
 // console.log(this.showLoading9)
 computed: {
 ...mapState([
  'showLoading0','showLoading1',....,'showLoading9'
 ])
 }
}

mapMutations mapGetters의 사용도 동일합니다.

//  vuex mapXXX 
import { mapState } from 'vuex'
export default {
 //   this.getStore()
 computed: {
 ...mapGetters([
  'getStore'
 ])
 },
 //  this.updateLoading() 
 //  this.$store.commit('updateLoading')
 methods: {
 ...mapMutations([
   'updateLoading'
  ]),
 }
}

사실은computed의 방식으로 값을 얻는 것이 가장 좋다. 이렇게 하면 많은 문제의 발생을 피할 수 있다. 특히 데이터 업데이트가 제때에 이루어지지 않는다.
보충 지식: vuex의mapState 방법으로 vuex의state 대상 속성 얻기
두 가지 기법이 있어요.
1. 먼저 구성 요소에 vuex의 mapState 방법을 도입합니다.
import { mapState } from 'vuex'
그리고 computed에 이렇게 쓰세요.

computed:{
  ...mapState({
    save:state => state.save// ES6 count 
  })
}

2. 구성 요소에 vuex의 mapState 방법을 먼저 도입해야 합니다.
import { mapState } from 'vuex'
그리고 computed에 이렇게 쓰세요.

computed:

 ...mapState([' save'])
}

지금까지 VUEX를 해결한 맵스테이트/...mapState 등 수치 문제는 편집자가 여러분에게 공유한 모든 내용입니다. 참고도 해주시고 저희도 많이 사랑해 주세요.