Home > Web猫ブログ(Nuxt)をv2.4.0に上げる

Web猫ブログ(Nuxt)をv2.4.0に上げる

Web猫ブログ(Nuxt)をv2.4.0に上げる

Fri Feb 01 2019

Vuex Moduleモードに変更しましょう!

当ブログを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
  })
},

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

余談ですが。

nuxt-server-error

いきなりでしたのでビビりました😅

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

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

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

コメントを残す

※ 返信が必要な方はメールアドレスも入力してください