17
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-11-28

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

17
12
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?