pinia

[shldhee]

https://pinia.vuejs.org/getting-started.html

[shldhee]

https://dev.to/carlomigueldy/getting-started-with-vue-3-pinia-store-typescript-by-building-a-grocery-list-app-19km

[shldhee]

[shldhee]

install

npm install pinia
vue-cli 사용시
vue add vue-cli-plugin-pinia

setting

// app.ts
import { createPinia } from 'pinia'
app.use(createPinia())

import { createPinia } from 'pinia'
createApp(App)
  .use(createPinia())
  .mount("#app");

What is Store?

• A Store (like Pinia) is an entity holding state and business logic that isn't bound to your Component tree. In other words, it hosts global state. It's a bit like a component that is always there and that everybody can read off and write to. It has three concepts, the state, getters and actions and it's safe to assume these concepts are the equivalent of data, computed and methods in components.
• Store(Pinia와 같은)는 구성 요소 트리에 바인딩되지 않은 상태 및 비즈니스 논리를 보유하는 엔터티입니다. 즉, 전역 상태를 호스트합니다. 항상 존재하고 모든 사람이 읽고 쓸 수 있는 구성 요소와 비슷합니다. 상태, getter 및 작업의 세 가지 개념이 있으며 이러한 개념이 구성 요소의 데이터, 계산 및 메서드와 동일하다고 가정하는 것이 안전합니다.

Defining a Store

// store/main.ts
import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const useStore = defineStore('main', {
  // other options...
})

• defineStore 첫번째 인수는 고유이름
• use 접두사는 관용적 composables

store 사용

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      // you can return the whole store instance to use it in the template
      store,
    }
  },
}

// 작동하지 않는다. 반응성을 깨뜨린다.
    // ❌ This won't work because it breaks reactivity
    // it's the same as destructuring from `props`
 const { name, doubleCount } = store

• setup() 내부에서 useStore()가 호출될 때까지 저장소가 생성되지 않기 때문에 저장소를 선언한다(실행한다)(정의한다)
• You can define as many stores as you want and you should define each store in a different file to get the most out of pinia (like automatically allow your bundle to code split and TypeScript inference).
• 원하는 만큼 상점을 정의할 수 있으며 pinia를 최대한 활용하려면 각 상점을 다른 파일에 정의해야 합니다(예: 번들이 코드 분할 및 TypeScript 추론을 자동으로 허용).
• 각각 파일에 스토어 정의

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { generateFakeData, Item } from "./models/item.model";
import { useMainStore } from "./store/index";
export default defineComponent({
  name: "App",
  setup() {
    const items = ref<Item[]>([]);
    const mainStore = useMainStore();
    onMounted(() => {
      items.value = mainStore.items;
    });
    function createItem() {
      mainStore.createNewItem(generateFakeData());
    }
    function deleteItem(id: string) {
      mainStore.deleteItem(id);
    }
    function updateItem(id: string) {
      mainStore.updateItem(id, generateFakeData());
    }
    return {
      items,
      createItem,
      deleteItem,
      updateItem,
    };
  },
});
</script>

[shldhee]

store 구조분할을 사용할땐 state만 사용할때 actions은 안된다

mport { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()
    // `name` and `doubleCount` are reactive refs
    // This will also create refs for properties added by plugins
    // but skip any action or non reactive (non ref/reactive) property
    const { name, doubleCount } = storeToRefs(store)

    return {
      name,
      doubleCount
    }
  },
})

state 상태 정의하기

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // arrow function recommended for full type inference
  state: () => {
    return {
      // all these properties will have their type inferred automatically
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})

state 관리

state 접근(읽고 쓰기)

const store = useStore()
store.counter++

state 리셋(초기값으로)

const store = useStore()
store.$reset()

state mutate 여러개

store.$patch({
  counter: store.counter + 1;
  name: 'Abalam',

위와 같이 하면 모든 컬렉션 수정할때 비용이 많이 든다. 아래처럼 함수로 한다.

cartStore.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

• However, some mutations are really hard or costly to apply with this syntax: any collection modification (e.g. pushing, removing, splicing an element from an array) requires you to create a new collection. Because of this, the $patch method also accepts a function to group this kind of mutations that are difficult to apply with a patch object:
• 그러나 일부 변형은 이 구문으로 적용하기가 정말 어렵거나 비용이 많이 듭니다. 모든 컬렉션 수정(예: 배열에서 요소 푸시, 제거, 연결)을 수행하려면 새 컬렉션을 만들어야 합니다. 이것 때문에, $patch 메소드는 또한 patch 객체로 적용하기 어려운 이러한 종류의 돌연변이를 그룹화하는 함수를 허용합니다.

state 구독

• watch보다 $subscribe()가 좋은 이유는 patch후 한번만 실행된다.

cartStore.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'
  mutation.type // 'direct' | 'patch object' | 'patch function'
  // same as cartStore.$id
  mutation.storeId // 'cart'
  // only available with mutation.type === 'patch object'
  mutation.payload // patch object passed to cartStore.$patch()

  // persist the whole state to the local storage whenever it changes
  localStorage.setItem('cart', JSON.stringify(state))
})

[shldhee]

Getters

• computed랑 똑같다.
• 첫번째 매개변수로 state를 받는다.

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

다른 getters 에 접근할때

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // automatically infers the return type as a number
    doubleCount(state) {
      return state.counter * 2
    },
    // the return type **must** be explicitly set
    doublePlusOne(): number {
      // autocompletion and typings for the whole store ✨
      return this.counter * 2 + 1
//     return this.doubleCount + 1
    },
  },
})

• this가 뭔지 찍어보기 전체 store같음 여기서 다른 getter구할듯?
• we can get access to the whole store instance through this 요거쓸때 type return값 필요한닷
• Most of the time, getters will only rely on the state, however, they might need to use other getters. Because of this, we can get access to the whole store instance through this when defining a regular function but it is necessary to define the type of the return type (in TypeScript). This is due to a known limitation in TypeScript and doesn't affect getters defined with an arrow function nor getters not using this:
• 대부분의 경우 getter는 상태에만 의존하지만 다른 getter를 사용해야 할 수도 있습니다. 이 때문에 일반 함수를 정의할 때 이를 통해 전체 저장소 인스턴스에 액세스할 수 있지만 반환 유형의 유형(TypeScript에서)을 정의해야 합니다. 이것은 TypeScript의 알려진 제한으로 인한 것이며 화살표 함수로 정의된 getter나 이것을 사용하지 않는 getter에 영향을 미치지 않습니다.

getters에 매개변수 전달하기

• state만 받을수 있다. 하지만 인수를 받는 함수를 반환하면 된다.

export const useStore = defineStore('main', {
  getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
})

<script>
export default {
  setup() {
    const store = useStore()

    return { getUserById: store.getUserById }
  },
}
</script>

<template>
User 2: {{ getUserById(2) }}
</template>

• 위 코드는 캐시가 안되고 단순히 함수를 호출한다.
• 아래 코드처럼 작성하면 일부를 자체적으로 캐시한다.

export const useStore = defineStore('main', {
  getters: {
    getActiveUserById(state) {
      const activeUsers = state.users.filter((user) => user.active)
      return (userId) => activeUsers.find((user) => user.id === userId)
    },
  },
})

다른 스토어 getters 접근

• 다른 스토어 게터를 사용하려면 getter 내부에서 직접 사용할 수 있습니다.

import { useOtherStore } from './other-store'

export const useStore = defineStore('main', {
  state: () => ({
    // ...
  }),
  getters: {
    otherGetter(state) {
      const otherStore = useOtherStore()
      return state.localData + otherStore.data
    },
  },
})

setup() 과 함께 사용할때

• 바로 접근 가능(state와 똑같이)

export default {
  setup() {
    const store = useStore()

    store.counter = 3
    store.doubleCount // 6
  },
}

[shldhee]

Actions

• Actions are the equivalent of methods in components. They can be defined with the actions property in defineStore() and they are perfect to define business logic:
• mehotds랑 똑같고 비지니스로직 정의하기 최고다 퍼펙트!

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

• getters와 같이 this 전체 store 인스턴스 접근가능
• getters와 다르게 비동기 작업이 가능
• 따라서 await 사용 가능

import { mande } from 'mande' // fetch를 쉽게

const api = mande('/api/users')

export const useUsers = defineStore('users', {
  state: () => ({
    userData: null,
    // ...
  }),

  actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // let the form component display the error
        return error
      }
    },
  },
})

action 사용하기

export default defineComponent({
  setup() {
    const main = useMainStore()
    // call the action as a method of the store
    main.randomizeCounter()

    return {}
  },
})

다른 스토어 액션 접근

• 게터랑 같다

import { useAuthStore } from './auth-store'

export const useSettingsStore = defineStore('settings', {
  state: () => ({
    // ...
  }),
  actions: {
    async fetchUserPreferences(preferences) {
      const auth = useAuthStore()
      if (auth.isAuthenticated) {
        this.preferences = await fetchPreferences()
      } else {
        throw new Error('User must be authenticated')
      }
    },
  },
})

setup과 사용

export default {
  setup() {
    const store = useStore()

    store.randomizeCounter()
  },
}

action subscribe

• It is possible to observe actions and their outcome with store.$onAction(). The callback passed to it is executed before the action itself. after handle promises and allows you to execute a function after the action resolves. In a similar way, onError allows you execute a function if the action throws or rejects. These are useful for tracking errors at runtime, similar to this tip in the Vue docs.

Here is an example that logs before running actions and after they resolve/reject.

• store.$onAction()을 사용하여 작업과 결과를 관찰할 수 있습니다. 전달된 콜백은 작업 자체보다 먼저 실행됩니다. 애프터 핸들은 약속하고 작업이 해결된 후 함수를 실행할 수 있도록 합니다. 비슷한 방식으로 onError를 사용하면 액션이 throw되거나 거부되는 경우 함수를 실행할 수 있습니다. 이는 Vue 문서의 이 팁과 유사하게 런타임에 오류를 추적하는 데 유용합니다.

다음은 작업을 실행하기 전과 해결/거부한 후 기록하는 예입니다.

• 다음은 액션 구독을 실행해 로그 실행

const unsubscribe = someStore.$onAction(
  ({
    name, // name of the action
    store, // store instance, same as `someStore`
    args, // array of parameters passed to the action
    after, // hook after the action returns or resolves
    onError, // hook if the action throws or rejects
  }) => {
    // a shared variable for this specific action call
    const startTime = Date.now()
    // this will trigger before an action on `store` is executed
    console.log(`Start "${name}" with params [${args.join(', ')}].`)

    // this will trigger if the action succeeds and after it has fully run.
    // it waits for any returned promised
    after((result) => {
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`
      )
    })

    // this will trigger if the action throws or returns a promise that rejects
    onError((error) => {
      console.warn(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
      )
    })
  }
)

// manually remove the listener
unsubscribe()