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を定義します。
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
<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や双方向算出プロパティも合わせたいなと思っていましたが、出来ませんでした。
export const state = () => ({
params: {
keyword: '',
},
});
export const mutations = {
params: {
updateKeyWord(state, value) {
state.keyword = value;
},
},
};
<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