Nuxt で更新フォームにデフォルトで既存のデータをプレースホルダーとして表示させたい

いつもお世話になっております。

現在Nuxtを利用して簡単なブログを作成しております。

作成した記事の更新フォームを作成しておりますが、
ページを開いたタイミングで既存のデータを適切なフォーム上に入力された状態にさせたいです。

まだNuxt自体が初心者なのですが、以下の様に実装をしてみましたので
どの部分が悪いのかご教授いただけますと幸いです。

一応自分の中のイメージでは

asyncData() 内でaxiosの$getを実行し、storeにあるpostを更新
storeにあるpostを更新すれば、computedで同期的に返ってきた値が√asyncData()のformData`に格納される
formDataにデータが格納されれば、htmlのv-modelに同期される

ただ、これだとCannot read property 'post' of undefinedとエラーが出てしまいます。

html
1<template>
2  <div>
3
4    <div class="form">
5
6      <div class="form__row">
7        <input v-model="formData.title" placeholder="タイトル">
8      </div>
9      <div class="form__row">
10        <textarea v-model="formData.content" placeholder="本文"></textarea>
11      </div>
12
13      <div class="form__row">
14        <button @click="save">保存</button>
15      </div>
16
17    </div>
18
19  </div>
20</template>
21
22<script>
23import { mapActions, mapGetters } from "vuex";
24export default {
25
26  async asyncData( {store, route, error} ){
27
28    const id = route.params['edit']
29
30    // ページを開いたタイミングでgetを実行し、既存の記事を取得する
31    await store.dispatch( 'posts/fetchPost', {id: id} )
32
33    return {
34      formData: {
35
36        'title': this.post.title,
37        'content': this.post.content,
38
39      }
40    }
41  },
42
43  computed: {
44    ...mapGetters( {
45
46      post: 'posts/post'
47
48    } )
49  },
50
51  methods: {
52    async save(){
53
54      const payload = {
55        ...this.formData
56      }
57
58      await this.addPost( {payload} )
59      this.$router.push( '/posts/' )
60
61    },
62
63    ...mapActions( 'posts', [ 'addPost' ] )
64  }
65
66}
67</script>

javascript
1// store/posts.js
2
3export const state = () => ( {
4
5  posts: [],
6  post: "",
7  hasPrevious: "",
8  hasNext: "",
9  currentPageNum: "",
10
11} )
12
13
14export const getters = {
15
16  posts: ( state ) => state.posts,
17  post: ( state ) => state.post,
18  hasPrevious: ( state ) => state.previous,
19  hasNext: ( state ) => state.next,
20  currentPageNum: ( state ) => state.currentPageNum,
21
22}
23
24
25export const mutations = {
26
27  setPosts( state, {posts} ){
28    state.posts = posts.results
29    state.previous = posts.previous
30    state.next = posts.next
31    state.currentPageNum = posts.currentPageNum
32
33  },
34
35  setPost( state, {post} ){
36    state.post = post
37  },
38
39  addPost( state, {post} ){
40    state.posts.push( post )
41  },
42
43}
44
45
46export const actions = {
47
48  async fetchPosts( {commit} ){
49    const posts = await this.$axios.$get( `/api/v1/posts/` )
50    commit( 'setPosts', {posts} )
51  },
52
53  async fetchPost( {commit}, {id} ){
54    const post = await this.$axios.$get( `/api/v1/posts/${id}` )
55    commit( 'setPost', {post} )
56  },
57
58  async addPost( {commit}, {payload} ){
59    const post = {...payload}
60    await this.$axios.$post( `/api/v1/posts/`, post )
61    commit( 'addPost', {post} )
62  },
63
64  async updatePosts( {commit}, {id, posts} ){
65    const post = await this.$axios.$put( `/api/v1/posts/${id}`, posts )
66    commit( 'setPost', {post} )
67  },
68
69}
70

行動規範の内容に同意します

回答1件

stateの初期値を期待するオブジェクトの型に合わせると良いと思います。

js
1export const state = () => ( {
2  posts: [],
3  post: {
4    title: "",
5    content: "",
6  },
7  hasPrevious: "",
8  hasNext: "",
9  currentPageNum: "",
10})