NuxtでVuex を使いかた覚えるために作ったもの

2230 ワード
nuxt.js Vuex Vuex テキストリンク

Vueで書かれている本をNuxtに書き換えたときのメモ
NuxtやVue関してあまり詳しくないのでもっといい方法あれば教えて欲しい

リアルタイムで入力した値がVuexを通して変換するものを作りました。

まずファイル構成はこんな感じ　

pages/index.vue

.<template>
  <div>
    {{message}}
    <EditForm />
  </div>
</template>

<script>
import EditForm from "./component/EditForm";

export default {
  computed: {
    message() {
      return this.$store.state.store.message;
    }
  },
  components: {
    EditForm
  }
};
</script>

pages/component/index.vue

<template>
  <div>
    <input :value="message" @input="doUpdate" />
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  },
  methods: {
    doUpdate(event) {
      this.$store.dispatch("store/doUpdate", event.target.value);
    }
  }
};
</script>

store/store.js


export default {
    name: 'store',
    state: {
        message: 'Hello Vue.js'
    },

    // 
    mutations: {
        setMessage(state, payload) {
            state.message = payload.message
        }
    },

    actions: {
        doUpdate({ commit }, message) {
            commit('setMessage', { message })
        }
    }
}

メモ（つまずいたところ）

this.$store.dispatch("store/doUpdate", event.target.value);
の部分本ではdoUpdateのみになっているがこの書き方にせねばならん