在组件内输入商店

Question

**如何在组件中输入定义的商店？我在这个模板的行中收到错误：{{ storeForm.lastName }} 说“属性‘storeForm’在类型上不存在”。所以我假设我需要在代码中输入定义的商店？商店很简单——只有名字和姓氏的字符串。 **

<template>
  <v-sheet width="300" class="mx-auto">
        <v-text-field
          label="First name"
          :rules="firstNameRules"
          placeholder="Your Name"
        >{{ storeForm.firstName }}</v-text-field>
  
        <v-text-field
          label="Last name"
          :rules="lastNameRules"
        >{{ storeForm.lastName }}</v-text-field>
  </v-sheet>
</template>
```
```js
<script lang="ts">
import { ref } from 'vue'
import {useForm} from '@/stores/form'

const storeForm = useForm()  //type this line

export default {
  setup() {
    const firstName = ref<string>('')
    const lastName = ref<string>('')
    return {firstName, lastName};
  },
    methods: {
      submit(event: any) {
        event.preventDefault();
        let user = {
          firstName: this.firstName,
          lastName: this.lastName,
        }

        storeForm.login(user)

        this.firstName = '';
        this.lastName = '';

      }
    }
  }
</script>
```

// store UseForm

import { defineStore } from 'pinia'

export const useForm = defineStore(
  {
  id: 'login',
  state: () => ({
    firstName: <string>'',
    lastName: <string>''
  }),
  actions: {
    login(data: any) {
      this.firstName = data.firstName
      this.lastName = data.lastName
    }
  }
})

Answer 1

老实说，你应该遇到比“未定义”错误更多的错误。其一，Pinia 应该抱怨它坏了。原因是因为您的脚本代码是 Vue 2 的 Options API（使用

methods

对象）和 Vue 3 的 Composition API（使用

setup

函数）的错误组合。您需要选择并坚持使用一种 API 语法。由于您将 Vue 3 与 refs 一起使用，Composition API 似乎是更好的选择。有问题的行

const storeForm = useForm()

不符合任何一个 API，但是当使用 Composition API 时，它应该在里面

setup()

<script lang="ts">
import { ref } from 'vue';
import { useForm } from '@/stores/form';

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

    const submit = (event: any) => {
      event.preventDefault();
      const user = {
        firstName: firstName.value,
        lastName: lastName.value
      };

      storeForm.login(user);

      firstName.value = '';
      lastName.value = '';
    };
    return { firstName, lastName, submit };
  }
};
</script>

我强烈建议查看 Vue 文档，因为它是一个很好的学习工具。确保了解 Options API 和 Composition API 之间的区别以及如何正确创建组件，特别是使用 Composition API。大多数 Composition API 文档实际上会使用

script setup

语法，这比使用

setup()

函数要简单一些，并且会使您的脚本代码看起来像这样：

<script setup lang="ts">
import { ref } from 'vue';
import { useForm } from '@/stores/form';

const storeForm = useForm();
const firstName = ref<string>('');
const lastName = ref<string>('');

const submit = (event: any) => {
  event.preventDefault();
  const user = {
    firstName: firstName.value,
    lastName: lastName.value
  };

  storeForm.login(user);

  firstName.value = '';
  lastName.value = '';
};
</script>