[Vue]unknown action type: postContentsが解消できません[Nuxt]

Question

Nuxt.js初学者で技術書やネット記事を参考にしながらアプリを作っています。

https://note.com/kawa1228/n/n9687ceb3152d

上記の記事を基にfirebaseを使い画像とテキストを投稿する機能を実装しようとしているのですが

unknown action type: postContents

というエラーが発生し画像とテキストをデータベース(firebase)に保存できないという問題が発生しています。

該当のソースコード

**app/posts/pages/new.vue**
<template>
<div class="post-wrapper">
  <div class="post-title">
    <h2>投稿ページ</h2>
  </div>
  
 <div class="post-name-wrapper">
   <input type="text" class="post-name" v-model="p_name"  placeholder="選手の名前" />
 </div>

 <div class="post-text-wrapper">
   <textarea class="post-text" v-model="body" placeholder="コメント"/>
 </div>

 <div class="post-image-wrapper">
    <img v-if="preview" src="preview"/>
    <input type="file" accept="image/png,image/jpeg" @change="previewImage"/>
  </div>

 <div class="post-btn-wrapper">
   <button class="post-btn" @click="postContents">投稿</button>
 </div>
</div>



</template>

<script>

export default {
  data() {
  return  {
   file: null,
   preview: '',
   fileName: '',
   body: '',
   p_name:'',
  }
 },

  methods: {
    previewImage(e) {
    const file = e.target.files[0];
    this.file = file
    const reader = new FileReader()
     reader.onload = (e) => {
       this.preview = e.target.result
       this.fileName = file.name
     }
     reader.readAsDataURL(file)
},

   async postContents() {
     const d = new Date()
     const today = d.toLocaleDateString()

     const contents = {
       note: {
         created_at: today,
         title: this.title,
         p_name:this.p_name,
         body: this.body,
       },
       image: {
         file: this.file,
         name: this.fileName
       }
     }
     await this.$store.dispatch('postContents', contents)
     console.log('load finish') // dataをclearにする
   }
 }
}

</script>

<style>
.post-title h2 {
font-size: 28px;
}

.post-name-wrapper {
margin-top: 20px;
}

.post-name {
width: 300px;
background-color: #ffff;
border: 1px solid ;
height: 25px;
}

.post-image-wrapper {
display: flex;
flex-direction: column;
}

.post-text-wrapper {
display: flex;
flex-direction: column;
margin: 10px 0 10px 0;
}

.post-text {
width: 500px;
height: 200px;
background-color: #ffff;
border: 1px solid ;
}

.post-image-wrapper {
  margin: 10px 0;
  width: 300px;
}

.post-btn-wrapper {
  display: inline-block;
}

.post-btn {
padding: 10px 50px;
background-color: #ffff;
border: solid 1px;
}
</style>

**app/store/index.js**
import { auth ,storage, db } from '~/plugins/firebase'

export const strict = false

export const state = () => ({
    user: null,
})

export const mutations = {
    setUser(state, payload) {
        state.user = payload
    }
}

export const actions = {
    signUp({ commit }, { email, password }) {
        return auth().createUserWithEmailAndPassword(email, password)
    },

    signInWithEmail({ commit }, { email, password }) {
        return auth().signInWithEmailAndPassword(email, password)
    },

    signInWithGoogle({ commit }){
        return auth().signInWithPopup(new auth.GoogleAuthProvider())
    },

    signOut() {
        return auth().signOut()
    },

    // 投稿機能（仮）始まり
    async postContent(context, payload) {
        const contents = payload
        const loadImage = await context.dispatch('uploadImage', {
          name: contents.image.name,
          file: contents.image.file
        })
        contents.image = loadImage
     
        const articlesRef = db.collection('articles')
        await articlesRef.add(contents)
    },


    uploadImage(context, payload) {
        if (!payload.file) {
          return {
            name: 'サンプル画像',
            src: 'https://placehold.jp/150x150.png'
          }
        }
        const storageRef = storage.ref()
     
        return new Promise((resolve, reject) => {
          storageRef
            .child(`images/${payload.name}`)
            .put(payload.file)
            .then((snapshot) => {
              snapshot.ref.getDownloadURL().then((url) => {
                resolve({ name: payload.name, src: url })
              })
            })
            .catch((err) => {
              console.log('画像投稿エラー', err)
            })
        })
      }
    // 投稿機能（仮）終わり
}

export const getters = {
    user(state){
        return state.user
    },
    isAuthenticated (state) {
        return !!state.user
    }
}

下記の通り画像とテキストの投稿に成功するとload finishとconsoleに出るようになっています。

await this.$store.dispatch('postContents', contents)
     console.log('load finish')

そしてconsoleにload finishと出ていますが投稿できていないという状況です。

この問題について調べてみたものの、index.jsのpostContent周りのどこかがおかしいということ以外何が問題なのかというのすら正直よくわかっていません。

この問題について何かわかる方がいらっしゃいましたらアドバイスお願いいたします。

Answer 1

this.$store.dispach()で呼び出しているアクション名と一致する必要があります。

**app/store/index.js**
import { auth ,storage, db } from '~/plugins/firebase'

export const strict = false

export const state = () => ({
    user: null,
})

export const mutations = {
    setUser(state, payload) {
        state.user = payload
    }
}

export const actions = {
    signUp({ commit }, { email, password }) {
        return auth().createUserWithEmailAndPassword(email, password)
    },

    signInWithEmail({ commit }, { email, password }) {
        return auth().signInWithEmailAndPassword(email, password)
    },

    signInWithGoogle({ commit }){
        return auth().signInWithPopup(new auth.GoogleAuthProvider())
    },

    signOut() {
        return auth().signOut()
    },

    // 投稿機能（仮）始まり
--   async postContent(context, payload) {
++   async postContents(context, payload) {
        const contents = payload
        const loadImage = await context.dispatch('uploadImage', {
          name: contents.image.name,
          file: contents.image.file
        })
        contents.image = loadImage

        const articlesRef = db.collection('articles')
        await articlesRef.add(contents)
    },


    uploadImage(context, payload) {
        if (!payload.file) {
          return {
            name: 'サンプル画像',
            src: 'https://placehold.jp/150x150.png'
          }
        }
        const storageRef = storage.ref()

        return new Promise((resolve, reject) => {
          storageRef
            .child(`images/${payload.name}`)
            .put(payload.file)
            .then((snapshot) => {
              snapshot.ref.getDownloadURL().then((url) => {
                resolve({ name: payload.name, src: url })
              })
            })
            .catch((err) => {
              console.log('画像投稿エラー', err)
            })
        })
      }
    // 投稿機能（仮）終わり
}

export const getters = {
    user(state){
        return state.user
    },
    isAuthenticated (state) {
        return !!state.user
    }
}