q-tabs , store 만들어 쓰기

test.vue

<template>
    <q-btn  color="green" label="버튼"></q-btn>
    <q-tabs v-model="listTab" align="left" no-caps class="tab-wrap">
        <q-tab 
        v-for="menu in menuList" 
        :name="menu" 
        :label="menu" 
        class="tab-item"
        />
    </q-tabs>
</template>

<script setup lang="ts">
import { defineComponent } from '@vue/composition-api'
import { ref } from 'vue';
import { useMnpStore } from '~~/store/mnp';
import { useTestStore } from '~~/store/test';
const listTab = ref('전체'); 
const menuList = ref(["전체", "정보 미등록", "초대 현황"]);

const mnpStore = useMnpStore();
const testStore = useTestStore();
onMounted( async ()=>{

    //await retrieveInvtMemberList();
    //await retrieveMemberList();
    console.log('mount');
    await testStore.testMethod();
})

</script>

q-tabs 안에 q-tab의 name 값을 누르면 q-tabs v-model에 반응 하는 것 같다.

 

 

test.ts 에 다음과 같이 스토어를 만들었다.

import { defineStore } from "pinia";

export const useTestStore = defineStore({
    id: "testList",
    actions :{
        async testMethod(){
            console.log("호출");
        }
    }
})

defineStore 함수는 Pinia 라이브러리에서 제공하는 함수로, Vuex 스토어를 정의하는 데 사용됩니다. Pinia는 Vue.js 애플리케이션의 상태 관리를 위한 간단하고 강력한 상태 관리 라이브러리입니다.

defineStore 함수는 Vuex 스토어의 모듈을 정의하고, 해당 모듈에 상태(state), 게터(getters), 뮤테이션(mutations), 액션(actions) 등을 정의할 수 있도록 해줍니다.

예를 들어, 주어진 코드에서는 useTestStore라는 이름의 Vuex 스토어 모듈을 정의하고 있습니다. 이 모듈에는 testMethod라는 액션이 정의되어 있습니다. 이 액션은 비동기 함수로, 호출되면 콘솔에 "호출"이라는 메시지를 출력합니다.

이렇게 정의된 Pinia 스토어는 Vue.js 애플리케이션의 다양한 컴포넌트에서 사용될 수 있으며, 애플리케이션의 상태를 효율적으로 관리하는 데 도움이 됩니다. Pinia는 Composition API와 자연스럽게 통합되어 있으며, Vue 3의 새로운 기능들을 활용하여 상태 관리를 쉽게 할 수 있도록 지원합니다.

 

라고 한다. 내 느낌상 함수를 정의해서 사용하는 느낌이 든다. .ts에서는 함수를 정리해두는 느낌이다. 그렇게 쓰면될거같다.