javascript Vuejs Vuetify Vuex形式的例子

Posted 2021-05-04

<template>
    <div>
        <v-card>
            <v-card-text>
                <h3>New Comment</h3>
                <v-text-field name="content" label="Content" v-model="formData.content" type="text"
                              :error-messages="contentErrors" multi-line></v-text-field>
                <v-btn :class="submitColor" @click="submitComment()">{{submitMessage}}</v-btn>
                <v-progress-linear v-if="submitting" v-bind:indeterminate="true"
                                   :disabled="submitting"></v-progress-linear>
            </v-card-text>
        </v-card>
    </div>
</template>
<script type="text/javascript">
  import { mapState, mapGetters, mapActions } from 'vuex'
  import { mapLaravelErrors, mapFormStatus } from '../../utils/utils'

  export default {
    name: 'comment-create',
    data () {
      return {
        formData: {
          content: '',
          view_id: false,
          user_id: false
        }
      }
    },
    created () {
      this.formData.view_id = this.viewId
      this.formData.user_id = this.$store.state.authModule.me.id
    },
    methods: {
      submitComment () {
        this.$store.dispatch('commentCreateModule/changeFormData', this.formData)
        this.$store.dispatch('commentCreateModule/submitForm')
          .then(() => {
            this.formData.content = ''
          })
          .catch(() => {
            console.error('unforseen error')
          })
      }
    },
    computed: {
      ...mapLaravelErrors('commentCreateModule', ['content']),
      ...mapFormStatus('commentCreateModule')
    },
    props: {
      viewId: {
        type: Number,
        required: true
      }
    },
  }
</script>

import debug from 'debug'

const runDebug = debug('commentCreateModule')

export default {
  namespaced: true,
  modules: {},
  state: {
    formData: {
      content: '',
      user_id: null,
      view_id: null,
    },
    errors: {},
    submitMessage: 'Save',
    redirect: false,
    submitMessageDefault: 'Save',
    submitMessageSaving: 'Saving...',
    submitMessageSuccess: 'Saved!',
    submitting: false,
    submitColor: 'primary',
    submitColorDefault: 'primary',
    submitColorSaving: 'disabled',
    submitSuccessColor: 'success',
  },
  mutations: {
    setContent (state, content) {
      state.content = content
    },
    setFormData (state, formData) {
      state.formData = {...formData}
    },
    setErrors (state, error) {
      state.errors = error
    },
    startSubmitStatus (state) {
      state.submitMessage = state.submitMessageSaving
      state.submitting = true
      state.submitColor = state.submitColorSaving
    },
    succeedSubmitStatus(state){
      state.submitMessage = state.submitMessageSuccess
      state.submitting = false
      state.submitColor = state.submitSuccessColor
    },
    failSubmitStatus (state) {
      state.submitMessage = state.submitMessageDefault
      state.submitting = false
      state.submitColor = state.submitColorDefault
    },
    resetSubmitStatus (state) {
      state.submitMessage = state.submitMessageDefault
      state.submitting = false
      state.submitColor = state.submitColorDefault
    }
  },
  //To use root actions and commits, pass { root: true } to 3rd argument of a commit or dispatch
  actions: {
    changeFormData ({dispatch, commit, getters, rootGetters}, formData) {
      console.log('change form data')
      commit('setFormData', formData)
    },
    submitForm ({dispatch, state, commit, getters, rootGetters}) {
      commit('startSubmitStatus')
      commit('setErrors', {})
      return dispatch('commentsModule/store', state.formData, {root: true})
        .then((response) => {
          return dispatch('viewsModule/show', {id: state.formData.view_id}, {root: true})
        })
        .then((response) => {
          commit('succeedSubmitStatus')
          commit('setErrors', {})
          commit('setContent','')
          setTimeout(()=>{
            commit('resetSubmitStatus')
          },1000)
        })
        .catch((error) => {
          commit('failSubmitStatus')
          commit('setErrors', error)
          setTimeout(()=>{
            commit('resetSubmitStatus')
          },1000)
        })
    }
  },
}

export function mapLaravelErrors (moduleStore = null, errors = []) {
  const computed = errors.reduce((accumulator, value) => {
    accumulator[`${value}Errors`] = function () {
      let module = this.$store.state[moduleStore]
      if (module.errors && module.errors.errors && module.errors.errors[value]) {
        return module.errors.errors[value]
      }
      return []
    }

    return accumulator
  }, {})
  computed.errorMessage = function () {
    let module = this.$store.state[moduleStore]
    if (module.errors && module.errors.message) {
      return module.errors.message
    }
    return null
  }

  return computed
}

export function mapFormStatus (moduleStore = null) {
  return {
    submitMessage(){
      const module = this.$store.state[moduleStore]
      if(typeof module.submitMessage !== 'undefined') return module.submitMessage
    },
    submitting(){
      const module = this.$store.state[moduleStore]
      if(typeof module.submitting !== 'undefined') return module.submitting
      return false
    },
    submitColor(){
      const module = this.$store.state[moduleStore]
      if(typeof module.submitColor !== 'undefined') return module.submitColor
      return 'primary'
    }
  }
}