Vue中如何合并含useStore与defineProps的两个script标签？

直接把两个script合并为单个<script setup lang="ts">标签即可，这是Vue 3推荐的组合式API写法，能同时处理组件注册、props声明和Vuex Store访问。

合并后的完整代码 #

<script setup lang="ts">
import { withDefaults, defineProps, computed, ref, toRefs, watch } from 'vue';
import { useStore } from 'vuex';
import emojiRegex from 'emoji-regex';
// 导入所有组件
import Spinner from '../common/Spinner.vue';
import Questionnaire from '../Questionnaire/Questionnaire.vue';
import WelcomeScreen from '../common/WelcomeScreen.vue';
import ThankYouScreen from '../common/ThankYouScreen.vue';
// 导入类型和工具函数
import {
  AdditionalParameters,
  QuestionnaireScreen,
  QuestionnaireConfig,
  QuestionnaireStyles,
  RawQuestionnaireStyles,
  QuestionnaireAnswer,
  SubmitAnswersFunction,
} from '../../lib/types';
import { checkAdditions, lightenDarkenColor } from '../../lib/main';

// 声明props（保留原逻辑）
const props = withDefaults(
  defineProps<{
    isLoading?: boolean;
    additions: AdditionalParameters;
    questionnaireConfig: QuestionnaireConfig;
    questionnaireStyling?: RawQuestionnaireStyles | null;
    submitAnswers: SubmitAnswersFunction;
    goBack: () => void;
  }>(),
  { isLoading: undefined, questionnaireStyling: null }
);

// 获取Vuex Store实例
const store = useStore();

// 注意：确保以下变量/函数已在当前script中定义（原代码中遗漏部分需补充）
const redirectUrl = ref(''); // 示例，根据实际业务赋值
const tAnswers = ref<QuestionnaireAnswer[]>([]);
const tScore = ref(0);

// 访问store和props的计算属性
const processedRedirectUrl = computed(() => {
  const url = populatePlaceholdersInLinkQueryParameters(
    redirectUrl.value,
    store.getters.userProfile // 直接调用store的getter
  );
  return url;
});

// 保留原点击处理逻辑
const finishClickHandler = (): void => {
  props.submitAnswers(props.questionnaireConfig, tAnswers.value, tScore.value);
  if (
    props.questionnaireConfig.thankyou_screens[0] &&
    props.questionnaireConfig.thankyou_screens[0] !== null 
  ) {
    window.location.replace(processedRedirectUrl.value);
  } else {
    console.log("hello")
  }
};

// 补充：实现占位符替换函数（原代码未定义）
function populatePlaceholdersInLinkQueryParameters(url: string, userProfile: any): string {
  // 此处写入你的URL占位符替换逻辑
  return url;
}
</script>

关键改动说明 #

• 组件自动注册：在<script setup>中导入的组件会自动完成注册，无需再通过components选项声明，省去了原defineComponent里的组件注册代码。
• Store直接调用：在script setup中直接执行useStore()获取Store实例，就能在计算属性、业务函数中直接使用store.getters、store.state等。
• Props逻辑复用：完全保留原有的defineProps和withDefaults配置，确保组件接收的props正常工作。
• 补全缺失依赖：原代码中redirectUrl、tAnswers、tScore、populatePlaceholdersInLinkQueryParameters未定义，需补充实现或导入，否则会触发报错。

内容的提问来源于stack exchange，提问作者Khant