JavaScript
vue.js
Vuex
nuxt.js

Nuxt.jsでモジュールモードのVuexストアのmutationにコンポーネントからアクセスする

vuexの使い方で少しハマったのでメモ。

Vuexストアの作成

Nuxt.jsにvuexストアを追加します(モジュールモード)。
https://ja.nuxtjs.org/guide/vuex-store/

フォーム画面を追加して、そのフォーム画面用のストアを作ったとします。
画面のvueファイルとstoreのディレクトリ構成はこんな感じ。

pages
    ┣ index.vue
    ┗ myform.vue
store
    ┣ index.js
    ┗ myform.js

フォームの入力値をvuexで管理する

myform.jsでは、stateの初期値とmutationを定義します。

myform.js
export const state = () => ({
  keyword: '',
});

export const mutations = {
  updateKeyWord(state, value) {
    state.keyword = value;
  },
};

myform.vueでは、インプットを作成し、双方向算出プロパティ(v-model)でmyform.jsのstateと紐付けます。myform.js内で定義したmutationをsetter経由で呼び出します。
参考:https://vuex.vuejs.org/ja/forms.html

myform.vue
<template>
  <v-form ref="form">
    <v-text-field
      label="キーワード"
      :counter="10"
      required
      v-model="keyword"
    ></v-text-field>
  <v-form>
</template>

export default {
  name: 'myform',
  computed: {
    keyword: {
      get() {
        return this.$store.state.myform.keyword;
      },
      set(value) {
        this.$store.commit('search/updateKeyword', value);
      },
    },
  },
}

ちなみにこのフォームのコンポーネントはvuetifyのものを利用しています。

ハマりどころ

mutationの呼び出し方

下記のように、storeモジュールのファイル名/mutationの関数名で呼び出してやる必要があります。

this.$store.commit('search/updateKeyword', value);

双方向算出プロパティを入れ子にできない(未解決)

適切な表現になっているかはわかりませんが、stateを入れ子状の構造にして、対応するmutationや双方向算出プロパティも合わせたいなと思っていましたが、出来ませんでした。

myform.js
export const state = () => ({
  params: {
    keyword: '',
  },
});

export const mutations = {
  params: {
    updateKeyWord(state, value) {
      state.keyword = value;
    },
  },
};
myform.vue
<template>
  <v-form ref="form">
    <v-text-field
      label="キーワード"
      :counter="10"
      required
      v-model="params.keyword"
    ></v-text-field>
  <v-form>
</template>

export default {
  name: 'myform',
  computed: {
    keyword: {
      get() {
        return this.$store.state.myform.params.keyword;
      },
      set(value) {
        this.$store.commit('search/updateKeyword', value);
      },
    },
  },
}

こんな風にしたかったですが、v-modelの部分でundefinedとなってしまいました。。

2017/12/22 追記
名前空間を使うとうまくいきそう
https://vuex.vuejs.org/ja/modules.html