Nuxt.js의 스테이트와 Getter에 대해서: Getters가 동작하지 않는다

Nuxt.js의 스테이트와 Getter에 대해서: Getters가 동작하지 않는다

Vue와 Nuxt는 처음이고, 이 프레임워크로 유니버설 모드로 첫 번째 웹사이트를 구축하고 있습니다.

공식 문서로는 원하는 것을 달성할 수 없기 때문에, Nuxt에서의 점포 운영이 조금 혼란스럽습니다.

스토어 폴더에는 현재 "products.js"라는 파일이 1개만 저장되어 있으며, 그 안에 다음과 같이 상태를 내보냅니다.

export const state = () => ({

  mistica: {
    id: 1,
    name: 'mistica'
    }
})

(객체는 알기 쉽게 설명하기 위해 간략화되었습니다.)

같은 파일에서 간단한 getter를 셋업했습니다.예를 들어 다음과 같습니다.

export const getters = () => ({

    getName: (state) => {
      return state.mistica.name
    }
})

설명서에 따르면 다음과 같이 컴포넌트를 셋업했습니다.

computed: {
 getName () {
  return this.$store.getters['products/getName']
 }
}

또는 다음 중 하나(사용할 수 없음):

computed: {
 getName () {
  return this.$store.getters.products.getName
 }
}

그러나 템플릿에서 "getName"을 사용하는 경우 "undefined"입니다. 후자의 경우 앱이 손상되어 "정의되지 않은 속성 "getName"을 읽을 수 없습니다."라고 표시됩니다.

템플릿에서는 "$store.state.products.mistica.name"을 사용하여 상태 값에 문제없이 직접 액세스할 수 있습니다. 왜 그런가요?

내가 뭘 잘못하고 있는 걸까, 아니면 더 나은 건 뭘 이해하지 못한 걸까?

에 공장 기능을 사용하다state는 nuxt.display 기능입니다.SSR 모드에서 각 클라이언트의 새 상태를 생성하는 데 사용됩니다.하지만 을 위해서getters이건 말이 안 돼요. 왜냐하면 이것들은 국가의 순수한 기능이기 때문이죠. getters는 플레인 오브젝트여야 합니다.

export const getters = {
  getName: (state) => {
    return state.mistica.name
  }
}

이 변경 후에는 getter가 작동해야 합니다.

---

그 후 를 사용할 수 있습니다.this.$store.getters['products/getName']컴포넌트에 포함시킵니다.

사용할 수 없습니다.this.$store.getters.products.getName이것은 잘못된 구문이기 때문입니다.

하지만 보다 단순하고 깨끗한 코드를 위해mapGetters에서 온 도우미vuex:

import { mapGetters } from "vuex";

...

computed: {
  ...mapGetters("products", [
    "getName",
    // Here you can import other getters from the products.js
  ])
}

2가지 정도의 일.루트 모듈을 설정하려면 "store" 폴더에 nuxt용 index.js가 필요할 수 있습니다.이 모듈만 사용할 수 있습니다.nuxtServerInit매우 편리할 수 있습니다.

products.js에서는 그 과정의 일부입니다.상태를 함수로 내보내야 하지만 동작, 돌연변이 및 게터는 개체에 불과합니다.getter를 다음과 같이 변경합니다.

export const getters = {
    getName: state => {
      return state.mistica.name
    }
}

그럼 두 번째 계산기로 얻을 수 있을 거야.저는 보통 다음과 같은 페이지/컴포넌트에 구현할 수 있는 "mapGetters"를 사용하는 것을 선호합니다.

<script>
import {  mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      getName: 'products/getName'
    })
}
</script>

그런 다음 템플릿에서 getName을 사용하여{{ getName }}또는 스크립트에서this.getName.

언급URL : https://stackoverflow.com/questions/57074134/understanding-state-and-getters-in-nuxt-js-getters-wont-working