Web猫ブログをNUXTv2.4に上げる
02月 01日

Web猫ブログとは

フロントエンドにVue.jsのフレームワークの一つNuxt.jsを、Headless CMSの一つであるContentfulを採用しています。見えない裏側で Travisを使った自動化、Graphcool (GraphQL)やFirestoreも入っています。

https://webneko.dev/

Vuex Moduleモードに変更

Nuxt リリースノート (以下リンクを参照)

https://ja.nuxtjs.org/guide/release-notes/

当ブログをNuxt v2.4.0に上げましたが、実質Pre v3のような感じを受けました。今までClassicモードで進めていたので、当然Moduleモードに変更しなければいけませんでした。/store/product.jsには、各種stateやmutations、actions、gettersが入ります。

// Modules
import { productModule } from './product'

export const store = new Vuex.Store({
  modules: {
    namespaced: true,
    product: productModule
  }
});

Vue Componentsで使う

Page Componentsから、ストアメソッドを呼び出す際に修正が入りました。

Module名を追加する必要があります。

async asyncData ({ store }) {
  await store.dispatch('product/initPosts', {
    'slug': ''
  })
}

Stateを呼び出す際も同様の修正を行います。

computed: {
  ...mapState({
    posts: state => state.product.posts,
    page: state => state.product.page,
    pagesTotal: state => state.product.pagesTotal
  })
},

ルーティング周りでコケる

余談ですが、自作の管理画面もv2.4に更新しようとすると。

nuxt-server-error

いきなりでしたのでビビりました😅 lockファイルや、ビルド後の生成ファイルを一旦削除しインストールし直すと解決する模様。

rm -rf node_modules/ .nuxt/ package-lock.json
npm i

この辺りはブラックボックス化され、分かりにくい点が存在するように思います。

お問い合わせ
タイトル
メールアドレス
詳細

あわせてよみたい..

-----