0

I'm trying to sent data to store action. How can I extract data keys firstName, lastName and pass it to store ? Now I'm getting an error "Property 'firstName', 'firstName' does not exist on type 'Object'" in the store file.

    // Child component

    <template>
       <v-btn type="submit" block class="mt-2" @click="submit($event)">Submit</v-btn>
    </template>
    <script lang="ts">
    import { ref } from 'vue'
    import {useForm} from '@/stores/form'

    const storeForm = useForm()

    export default {
      setup() {
        const firstName = ref<string>('')
        const lastName = ref<string>('')

        return {firstName, lastName};
      },
      
        methods: {
          submit(event: any) {
            let user = {
              firstName: this.firstName,
              lastName: this.lastName,
            }

          }
        }
      }
    </script>

    // store

import { defineStore } from 'pinia'
export const useForm = defineStore(
  {
  id: 'login',
  state: () => ({
    firstName: <string>'',
    lastName: <string>''
  }),
  actions: {
    login(data: Object) {
      this.firstName = data.firstName  // here data.firstName gets an error
      this.lastName = data.lastName     // here data.lastName gets an error
    }
  }
})
  • In your store you have to define a state. And that state consists of "firstname" and "lastname". Your actions are to modify these states. So you did not define any states, so your action cannot overwrite it. And you cannot get those states as well because they dont exist. And in your method "submit" you have to call your action so your action can do its job – Moemen Hussein Feb 21 '23 at 12:22
  • The use of Object type is a mistake, see https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript – Estus Flask Feb 21 '23 at 12:25
  • But I did write the state in the store, simply had;nt post it. The entire store looks like that (edited) –  Feb 21 '23 at 13:04

0 Answers0