Vue3에서 Pina 영구 저장소를 구성하는 방법

1. 피나 설치

Vue3 프로젝트에서 Pina는 npm을 통해 설치할 수 있습니다.

npm install pina

1. 2플러그인 생성

유지 관리성을 향상시키기 위해 Pina용 플러그인을 만들 수 있습니다.

파일을 만들고  pina.js 파일에 다음 코드를 입력합니다.

import { createStore } from "pina";
export const store = createStore();
export default {
  install: (app) => {
    app.config.globalProperties.$store = store;
    app.provide("store", store);
  },
};

1. 3main.js에 플러그인 도입

main.js 파일 에  플러그인을 도입하고 Vue 애플리케이션에 추가합니다.

import { createApp } from "vue";
import App from "./App.vue";
import pina from "./pina.js";

createApp(App).use(pina).mount("#app");

1. 4피나 사용하기

위의 구성을 통과한 후 Vue3에서 Pina의 영구 저장 기능을 사용할 수 있습니다. 예를 들어:

import { store } from "./pina.js";
export default {
  setup() {
    const count = store.ref("count", 0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  },
};

위 코드에서는  count 변수를 생성하고  store.ref 함수를 통해 영구 저장소를 구현했습니다. count.value 이 변수의 값을 얻으려면 구성요소에서 이를 사용하십시오  .

위는 Vue3에서 Pina 영구 저장소를 구성하는 기본 단계입니다. 이는 단순한 예일 뿐이며 실제 필요에 따라 변경하고 확장할 수 있습니다.