web-dev-qa-db-ja.com

Nuxt.jsの状態とゲッターを理解する：ゲッターは機能しません

VueとNuxtを初めて使用し、これらのフレームワークを使用してユニバーサルモードで最初のWebサイトを構築しています。

ストアがnuxtでどのように機能するかについて少し混乱しています。公式のドキュメントに従っていると、私が思っていることを達成できないからです。

私のストアフォルダーには、今のところ「products.js」と呼ばれる1つのファイルのみを配置しています。その中に、次のような状態をエクスポートします。

export const state = () => ({

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

（説明をわかりやすくするためにオブジェクトを簡略化しています）

同じファイルで、簡単なゲッターを設定します。例えば：

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」になります。後者の場合、アプリが破損し、「undefinedのプロパティ「getName」を読み取れません」と表示されます。

テンプレートでは、「$ store.state.products.mistica.name」を使用して州の値に直接問題なくアクセスできることに注意してください。なぜですか。

私は何を間違っているのですか、それとももっとよく理解できなかったのですか？

vue.jsvuexnuxt.js
2
Stefano Franceschetto

いくつかのこと。 「store」フォルダーでは、nuxtがルートモジュールを設定するためにindex.jsが必要になる場合があります。これは、nuxtServerInitを使用できる唯一のモジュールであり、非常に便利です。

あなたのproducts.jsでは、あなたはそこへの道の一部です。状態は関数としてエクスポートする必要がありますが、アクション、ミューテーション、ゲッターは単なるオブジェクトです。したがって、ゲッターを次のように変更します。

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

次に、2番目に計算されたものがゲッターを取得します。私は通常、次のようにページ/コンポーネントに実装できる「mapGetters」を使用することを好みます。

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

次に、{{ getName }}を使用してテンプレートでgetNameを使用するか、this.getNameを使用してスクリプトでgetNameを使用できます。

2
Andrew1325