As a newcomer to VUE, I am faced with the task of modifying some existing code. Here is my dilemma:
Within a single component, there are two script tags present. One of them contains an import for useStore from the vuex library.
The other script tag includes an import for defineProps, which is responsible for fetching the props passed into the component.
Now, I have a function that requires access to both of these imports. I want to combine them, but I'm unsure of how to go about it.
This is script1:
<script lang="ts">
import { defineComponent } from 'vue';
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 { useStore } from 'vuex';
export default defineComponent({
name: 'FullQuestionnaire',
components: { Spinner, Questionnaire, WelcomeScreen, ThankYouScreen },
setup() {
const store = useStore();
},
});
</script>
This is script2:
<script setup lang="ts">
import { withDefaults, defineProps, computed, ref, toRefs, watch } from 'vue';
import emojiRegex from 'emoji-regex';
import {
AdditionalParameters,
QuestionnaireScreen,
QuestionnaireConfig,
QuestionnaireStyles,
RawQuestionnaireStyles,
QuestionnaireAnswer,
SubmitAnswersFunction,
} from '../../lib/types';
import { checkAdditions, lightenDarkenColor } from '../../lib/main';
const props = withDefaults(
defineProps<{
isLoading?: boolean;
additions: AdditionalParameters;
questionnaireConfig: QuestionnaireConfig;
questionnaireStyling?: RawQuestionnaireStyles | null;
submitAnswers: SubmitAnswersFunction;
goBack: () => void;
}>(),
{ isLoading: undefined, questionnaireStyling: null }
);
//The function requiring access to store from script1 and questionnaireConfig from script 2
const processedRedirectUrl = computed(() => {
const url = populatePlaceholdersInLinkQueryParameters(
redirectUrl.value,
// **** NEED STORE ACCESS ****
// store.getters.userProfile
);
return url;
});
const finishClickHandler = (): void => {
props.submitAnswers(questionnaireConfig.value, tAnswers.value, tScore.value);
if (
questionnaireConfig.value.thankyou_screens[0] &&
questionnaireConfig.value.thankyou_screens[0] !== null
) {
window.location.replace(processedRedirectUrl.value);
} else {
console.log("hello")
}
};
</script>