코딩 - Vue 2 환경에서 Vuex 를 pinia 로 변경하기

Vue3 에서 공식 상태 관리 라이브러리가 Vuex 에서 Pinia 로 변경되었다. Vue2, Vue3 모두를 지원하고 있고 향후 Vue3 환경으로 전환을 고려하여 Vuex 을 pinia 로 변경하는 작업을 진행하였다.

Install Pinia 

설치는 Pinia 공식 사이트의 가이드에 따라 진행하였다. 

❶ 패키지 관리자를 사용하여 pinia 설치

npm install --save pinia

❷ App 에서 플러그인을 설치하고 App 루트에 생성된 pinia 객체를 삽입

여러가지 문제들과 조우

공식 가이드에 따라 설치를 진행하였지만 여러가지 여러 오류가 발생되었으며 가장 먼저 아래 컴파일 오류를 접하게 된다.

문제 ① - 터미널에서 확인

Can't import the named export 'computed' from non EcmaScript module (only default export is available)

Webpack bundler .mjs 파일을 해석하지만 그것이 ESM 모듈이라는 것을 알지 못한다는 것을 의미한다.  이문제는 vue.config.js  파일에 webpack 규칙에 추가하여 해결 할 수 있다. 

module.exports = {

configureWebpack: {

module: {

rules: [

{

test: /\.mjs$/,

include: /node_modules/,

type: "javascript/auto"

}

]

}

},

문제 ② - 터미널에서 확인

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

이문제는 defineStore 함수를 사용하여 정의된 Store 객체를 다른 컴포넌트에서 사용하려고 하는 경우 발생하는 것으로 확인되었다. 이 문제는 Pinia가 준비되기 전에 다른 컴포넌트에서  정의된 Store 객체를  사용하는 경우에 발생된다고 하는데 여러가지 방법을 사용해보았으나 해결되지 않았고 pinia 객체를 인자로 하여 use...Store() 함수를 호출하는 방법으로 해결할 수 있었다. 

import { useStreamStore } from '@/store/streamStore'

import { pinia } from "@/store";

const streamStore = useStreamStore(pinia);

문제 ③ - Chrome 개발자 모드에서 확인

  pinia.mjs?be92:926 Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith') at devtoolsPlugin (pinia.mjs?be92:926:1)

Chrome 개발자 도구에서는 확인되지 않았지만 Firefox 에서 Vue Devtools 를 설치하고 확인한 결과 원인을 확인 할 수 있었다.

이 문제는 Store 을 정의할 때 id 값을 추가하여 해결할 수 있었다. 아래는 관련 소스이다.

사용후기 

pinia 를 적용하고 2주 정도 사용을 해보니 여러 장점들이 보이기 시작했다. vuex 경우는 하나의 저장소를 생성하면 state, getters, mutations, actions, modules  속성을 필요에 따라 정의해야 하는데 여간 불편한 것이 아니어서 멀리하는 경향이 있었다.(로그인의 경우만 적용)  pinia 의 경우 이부분이 단순화 되어 있어 적용이 쉬웠다. 또한 자꾸 사용을 하다 보니 왜 Vue 에서 store, service 로 모듈화시켜 개발하는지 조금 이해가 되었다.  (다수의 vue 오픈소스를 보면 store, service 로 모듈화 되어 있었다.)

참고자료

• Vuex를 사용해야 할 이유?
• Installation | Pinia
• Can't import the named export XXXX from non EcmaScript module (only default export is available)
  
• Using a store outside of a component