面试题：Vue中Pinia模块化设计的基本步骤

创建新模块：
- 在项目中创建一个新的.js文件，例如userModule.js。
定义状态（state）：
- 使用defineStore函数来定义模块。在defineStore的回调函数中返回一个对象，其中的属性就是状态。
- 示例：

import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', () => {
    const userInfo = ref({ name: '', age: 0 });
    return { userInfo };
});

定义actions：
- 在defineStore的回调函数返回的对象中定义函数，这些函数就是actions。Actions 可以异步操作，修改状态等。
- 示例：

import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', () => {
    const userInfo = ref({ name: '', age: 0 });
    const updateUser = (newName, newAge) => {
        userInfo.value.name = newName;
        userInfo.value.age = newAge;
    };
    return { userInfo, updateUser };
});

定义getters：
- 在defineStore的回调函数返回的对象中使用computed来定义getters。Getters 用于从状态派生新的数据。
- 示例：

import { defineStore } from 'pinia';
import { computed } from 'vue';
export const useUserStore = defineStore('user', () => {
    const userInfo = ref({ name: '', age: 0 });
    const updateUser = (newName, newAge) => {
        userInfo.value.name = newName;
        userInfo.value.age = newAge;
    };
    const userFullInfo = computed(() => {
        return `Name: ${userInfo.value.name}, Age: ${userInfo.value.age}`;
    });
    return { userInfo, updateUser, userFullInfo };
});

在组件中引入和使用：
- 引入：在组件的<script>标签中导入定义好的useUserStore。
- 使用状态：通过调用useUserStore函数获取实例，然后访问状态。
- 使用actions：调用实例的actions函数。
- 使用getters：访问实例的getters属性。
- 示例：

<template>
    <div>
        <p>Name: {{ userStore.userInfo.name }}</p>
        <p>Age: {{ userStore.userInfo.age }}</p>
        <p>{{ userStore.userFullInfo }}</p>
        <button @click="updateUser">Update User</button>
    </div>
</template>

<script setup>
import { useUserStore } from './userModule.js';
const userStore = useUserStore();
const updateUser = () => {
    userStore.updateUser('John', 30);
};
</script>

星途面试题库

面试题：Vue中Pinia模块化设计的基本步骤

知识考点

面试题答案