この記事は最終更新日から1年以上が経過しています。

Nuxt.jsでStoreを分割する方法

2021-02-13
2021-02-13

はじめに

基本的な所作は、NuxtJS ストアに書いてあります。 nuxtServerInitindex.jsのみ使用できることに注意です。

サンプルコード

  • Apollo Clientを使用している
  • SSRでPostモデルのデータを取得する
bash
. ├── index.js └── post.js

index.js

js
async nuxtServerInit({ commit }, { req }) { const response = await this.app.apolloProvider.defaultClient.query({ query: fetchPosts, }) commit("user/setPosts", response.data.posts) },

post.js

js
export const state = () => ({ posts: [], }) export const getters = {} export const actions = {} export const mutations = { setPosts(state, posts) { state.posts = posts }, }

gettersに記載しても、pagescomponentsで取得できなかったので、(詳しく調べてはいない)

js
this.$store.state.post.posts

上記のように、stateから値を取得している。