Pinia

8.23 (금)

1. Loading 모달

👉 서버를 통해 api 데이터를 가져오는데 시간이걸리는것에 대해 loading창을 띄우기

TodoListComponent.vue

const loading = ref(false) // api를 가져올때 로딩모달

👉 loading 변수를 반응형으로 만든다

const todoList = ref([]) // 언제 올지 모르니까 ref로 만든다

    loading.value = true // api를 가져오는 로딩작업이 시작되면
    const loadPageData = async(page) =>{// api에서 받은 res.data중에서 content라는 속성을 todoList.value에 집어넣는다. 
    const data = await getList(page)
    todoList.value = data.content //data의 content속성을 가져온다.
    loading.value = false // 로딩작업이 끝나면
}

👉 api서버 통신하는 코드 내부에서 loading.value값을 true -> false로 변경해준다.

<div v-if="loading" class="loadingDiv">
         <h1>loading.......</h1>
</div>

👉 loading이 true일때는 loading이라는 화면이 잠깐 출력된다.

---

2. Pinia

👉 상태관리를 위한 라이브러리
👉 npm install pinia
👉 Pinia의 store에 저장하여 사용했을때 이점은 어떤 컴포넌트간에 해당 데이터를 제약없이 이용할수 있다는것이다.

상태관리기준

• 컴포넌트간 거리가 먼 데이터
• 외부에서 변경가능성 없는 데이터 = 서버에서 변경가능한 데이터
  ex) 키오스크 -> 장바구니
  👉 프로젝트의 모든 데이터들을 store로 빼주는것이 아닌, 이러한 상태관리기준에 적합한 데이터들만 store를 사용하여 상태관리데이터로 빼주는것.

---

3. Store를 이용한 Login

3-0. useMember.js

import { defineStore } from "pinia";
import { ref } from "vue";

const useMember = defineStore('memberStore', ()=>{ //memberStore는 스토어의 고유ID

    const member = ref({mid:null}) // 로그인한 사용자의 값을 반응형으로 저장

    const login = (valueId) => {
        
        console.log('login..... '+valueId)

        member.value.mid = valueId  // pinia store의 상태를 업데이트

        localStorage.setItem('mid',valueId) // 로컬스토리지의 상태를 업데이트

    }

    const logout = () => {
        console.log('logout.........')

        member.value.mid = null

        localStorage.removeItem('mid')
    }

    return{member,login, logout} // 해당 return값을 통해 나중에 useMember를 호출하고,(member,login, logout) 원하는 변수 및 메소드를 사용할수 있다.

})

export default useMember

👉 pania를 이용하여 useMember라는 store를 만들고, member라는 반응형 객체를 만들어 로그인을 했는지 알수있도록 만든다.
👉 login 메소드에서는 loginPage.vue에서 input을 통해 midInput이라는 값을 넣고, 그 변수값을 매개변수로 들어오게 된다.
👉 localStoralge를 통해 로그인한 기록을 남기게되어 새로고침을 하더라도 로그인기록이 남아있어 재로그인을 할 번거로움을 줄인다.
👉 useMember의 return값은 useMember를 호출하여 원하는 메소드 및 변수를 어느 컴포넌트에서든 사용할 수 있다. (하지만 import는 필수)

---

3-1. LoginPage.vue

<template>
    <div>
        <h1>Login Page</h1>
        <input type="text" v-model="midInput">
        <button @click="handleClick">Login</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import useMember from '../stores/useMember';

const {login} = useMember() // useMember.js의 login 기능 사용

const midInput = ref('') // input되는 id값과 연동되도록 v-model양방향을 사용

const handleClick = () => {

    const mid = midInput.value // input text 로 입력한 id 값을 mid변수에 넣고

    login(mid) // store에 저장된 login메소드에 mid 인자를 넣어 호춣
}

</script>

<style lang="scss" scoped>

</style>

👉 useMember store를 import하여 사용하는모습

---

3-2. todo.js

import useMember from '../stores/useMember'

const IndexPage = () => import('../pages/todo/IndexPage.vue')
const TodoListPage = () => import('../pages/todo/TodoListPage.vue')
const TodoAddPage = () => import('../pages/todo/TodoAddPage.vue')
const TodoReadPage = () => import('../pages/todo/TodoReadPage.vue')


const moveToLogin = (to, from, next) => { // 이런식으로 login을 하고 다른 페이지로 넘어갈수있는 메소드를 빼놓으면 다른 페이지로 갈때 로그인을 한 사람만 할수있도록 filter기능을 할 수 있다.

    const checkLogin = () => { // checkLogin 메소드는 로그인 한 기록이 있다면 true / 아니면 false
        const {member} = useMember() // useMember.js에서 member라는 반응형 변수를 사용함

        return member.mid ? true : false 
    }

    console.log('move to add page '+ checkLogin())

    if(checkLogin()){
        next() // 로그인 기록이 있으면 다른 서비스를 이용할수 있다.
    }else{
        next('/login') // 로그인 기록이 없으면 login 페이지로 넘어간다.
    }
}

const todoRouting = {path: "/todo",
            component: IndexPage, // Index가 가장위에있고, 그 아래에 todo list / todoadd가 있는것이다.
            children: [
                {path: "list", component: TodoListPage, beforeEnter: moveToLogin}, // 실제로는 path: /todo/list, component는 위에 const TodoListPage로 인해서 import연결이 되어있는것.
                {path: "add", component: TodoAddPage, beforeEnter: moveToLogin},
                {path: "", redirect: '/todo/list'}, // 이것때문에 Indexpage의 가장 기초페이지가 list페이지가 되는것.
                {path: "read/:mno", component: TodoReadPage, beforeEnter: moveToLogin},
               
            ]
        }

export default todoRouting //다른파일에서 todoRouting을 쉽게 import

---

3-3. App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router';
import useMember from './stores/useMember';

const {member, logout} = useMember() //useMember.js 에서 member변수와 logout기능을 사용하겠다.
</script>

<template>
  
  <div>
    <span><RouterLink to="/">Main</RouterLink></span> <!--A태그 처럼 생긴 화면이동-->
    <span><RouterLink to="/about">About</RouterLink></span>
    <span><RouterLink to="/todo">Todo</RouterLink></span>
    <span v-if="member.mid === null"><RouterLink to="/login">Login</RouterLink></span> <!--사용자가 로그인 한 기록이 없을때 로그인 버튼이 보임-->

    <span v-if="member.mid !== null"><button @click="logout">Logout</button></span> <!--사용자가 로그인 한 기록이 있을때 로그아웃 버튼이 보임-->
  </div>

  <div>
    <hr/>
    MemberID : {{ member.mid }}
    <hr/>
  </div>

  <RouterView></RouterView> <!--라우터로 이용된 페이지를 출력-->
</template>


<style scoped>

span{
  margin-left: 1em;
}

</style>

---

3-4. main.js

import { createApp } from 'vue'
import App from './App.vue'
import routeConfig from './routers'
import { createPinia } from 'pinia'




createApp(App).
use(routeConfig).
use(createPinia()). // pinia사용하려면 필수
mount('#app') // use(routeConfig)으로 설정한 라우터로 사용하겠다