feat: use pinia instead of vuex to manage status

package.json

@@ -25,9 +25,9 @@
     "jszip": "^3.10.0",
     "object-hash": "^3.0.0",
     "perfect-scrollbar": "^1.5.2",
+    "pinia": "^2.0.30",
     "vue": "^3.2.30",
-    "vue-i18n": "^9.2.0-beta.9",
-    "vuex": "^4.0.2"
+    "vue-i18n": "^9.2.0-beta.9"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",

src/App.vue

@@ -197,7 +197,7 @@ const codeVisible = ref(false)
 function handleAction(actionType: ActionType) {
   switch (actionType) {
     case ActionType.Undo:
-      store.commit(UNDO)
+      store[UNDO]()
       recordEvent('action_undo', {
         event_category: 'action',
         event_label: 'Undo',
@@ -205,7 +205,7 @@ function handleAction(actionType: ActionType) {
       break
 
     case ActionType.Redo:
-      store.commit(REDO)
+      store[REDO]()
       recordEvent('action_redo', {
         event_category: 'action',
         event_label: 'Redo',

src/components/ActionBar.vue

@@ -32,8 +32,8 @@ const { t } = useI18n()
 
 const store = useStore()
 
-const canUndo = computed(() => store.state.history.past.length > 0)
-const canRedo = computed(() => store.state.history.future.length > 0)
+const canUndo = computed(() => store.history.past.length > 0)
+const canRedo = computed(() => store.history.future.length > 0)
 
 const actions = computed(() => [
   {

src/hooks/useAvatarOption.ts

@@ -7,10 +7,10 @@ import type { AvatarOption } from '@/types'
 export default function useAvatarOption() {
   const store = useStore()
 
-  const avatarOption = computed(() => store.state.history.present)
+  const avatarOption = computed(() => store.history.present)
 
   const setAvatarOption = (newOption: AvatarOption) => {
-    store.commit(SET_AVATAR_OPTION, newOption)
+    store[SET_AVATAR_OPTION](newOption)
   }
 
   return [avatarOption, setAvatarOption] as const

src/hooks/useSider.ts

@@ -6,14 +6,14 @@ import { SET_SIDER_STATUS } from '@/store/mutation-type'
 export default function useSider() {
   const store = useStore()
 
-  const isCollapsed = computed(() => store.state.isSiderCollapsed)
+  const isCollapsed = computed(() => store.isSiderCollapsed)
 
   const openSider = () => {
-    store.commit(SET_SIDER_STATUS, false)
+    store[SET_SIDER_STATUS](false)
   }
 
   const closeSider = () => {
-    store.commit(SET_SIDER_STATUS, true)
+    store[SET_SIDER_STATUS](true)
   }
 
   return { isCollapsed, openSider, closeSider }

src/main.ts

@@ -2,16 +2,15 @@ import 'perfect-scrollbar/css/perfect-scrollbar.css'
 import './styles/reset.css'
 import './styles/global.scss'
 
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
-import store, { storeKey } from '@/store'
-
 import App from './App.vue'
 import i18n from './i18n'
 
 const app = createApp(App)
 
-app.use(store, storeKey)
+app.use(createPinia())
 
 app.use(i18n)
 

src/store/index.ts

-import { type InjectionKey } from 'vue'
-import { type Store, createStore, useStore as baseUseStore } from 'vuex'
+import { defineStore } from 'pinia'
 
 import { WrapperShape } from '@/enums'
 import type { AvatarOption } from '@/types'
@@ -22,64 +21,53 @@ export interface State {
   isSiderCollapsed: boolean
 }
 
-export default createStore<State>({
-  strict: true,
-
-  state: {
-    history: {
-      past: [],
-      present: getRandomAvatarOption({ wrapperShape: WrapperShape.Squircle }),
-      future: [],
-    },
-    isSiderCollapsed: window.innerWidth <= SCREEN.lg,
-  },
-
-  mutations: {
-    [SET_AVATAR_OPTION](state, data: AvatarOption) {
-      state.history = {
-        past: [...state.history.past, state.history.present],
+export const useStore = defineStore('store', {
+  state: () =>
+    ({
+      history: {
+        past: [],
+        present: getRandomAvatarOption({ wrapperShape: WrapperShape.Squircle }),
+        future: [],
+      },
+      isSiderCollapsed: window.innerWidth <= SCREEN.lg,
+    } as State),
+  actions: {
+    [SET_AVATAR_OPTION](data: AvatarOption) {
+      this.history = {
+        past: [...this.history.past, this.history.present],
         present: data,
         future: [],
       }
     },
 
-    [UNDO](state) {
-      if (state.history.past.length > 0) {
-        const previous = state.history.past[state.history.past.length - 1]
-        const newPast = state.history.past.slice(
-          0,
-          state.history.past.length - 1
-        )
-        state.history = {
+    [UNDO]() {
+      if (this.history.past.length > 0) {
+        const previous = this.history.past[this.history.past.length - 1]
+        const newPast = this.history.past.slice(0, this.history.past.length - 1)
+        this.history = {
           past: newPast,
           present: previous,
-          future: [state.history.present, ...state.history.future],
+          future: [this.history.present, ...this.history.future],
         }
       }
     },
 
-    [REDO](state) {
-      if (state.history.future.length > 0) {
-        const next = state.history.future[0]
-        const newFuture = state.history.future.slice(1)
-        state.history = {
-          past: [...state.history.past, state.history.present],
+    [REDO]() {
+      if (this.history.future.length > 0) {
+        const next = this.history.future[0]
+        const newFuture = this.history.future.slice(1)
+        this.history = {
+          past: [...this.history.past, this.history.present],
           present: next,
           future: newFuture,
         }
       }
     },
 
-    [SET_SIDER_STATUS](state, collapsed) {
-      if (collapsed !== state.isSiderCollapsed) {
-        state.isSiderCollapsed = collapsed
+    [SET_SIDER_STATUS](collapsed: boolean) {
+      if (collapsed !== this.isSiderCollapsed) {
+        this.isSiderCollapsed = collapsed
       }
     },
   },
 })
-
-export const storeKey: InjectionKey<Store<State>> = Symbol()
-
-export function useStore() {
-  return baseUseStore(storeKey)
-}

yarn.lock

@@ -1959,16 +1959,16 @@
     "@vue/compiler-dom" "3.2.30"
     "@vue/shared" "3.2.30"
 
-"@vue/devtools-api@^6.0.0-beta.11":
-  version "6.0.0-beta.19"
-  resolved "https://registry.npmmirror.com/@vue/devtools-api/download/@vue/devtools-api-6.0.0-beta.19.tgz?cache=0&sync_timestamp=1633376469341&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40vue%2Fdevtools-api%2Fdownload%2F%40vue%2Fdevtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf"
-  integrity sha1-+OiAWdqkJFFZkkJqDH6lzeB+mb8=
-
 "@vue/devtools-api@^6.0.0-beta.13":
   version "6.0.0-beta.18"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.18.tgz#84c0aff9289a57294cb97490811f69e8a0a67f8a"
   integrity sha512-56vRhO7nXWWFYTx520BQSDlQH5VYpwy62hFDEqi2yHHEBpEqseOP5WYQusq7BEW3DXSY9E9cfPVR5CFtJbKuMg==
 
+"@vue/devtools-api@^6.4.5":
+  version "6.5.0"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
 "@vue/reactivity-transform@3.2.30":
   version "3.2.30"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.30.tgz#2006e9f4645777a481b78ae77fc486159afa8480"
@@ -6161,6 +6161,14 @@ pify@^4.0.0, pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pinia@^2.0.30:
+  version "2.0.30"
+  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.30.tgz#b18a581dad6821ed5fbebfaf631229480ea9d2d9"
+  integrity sha512-q6DUmxWwe/mQgg+55QQjykpKC+aGeGdaJV3niminl19V08dE+LRTvSEuqi6/NLSGCKHI49KGL6tMNEOssFiMyA==
+  dependencies:
+    "@vue/devtools-api" "^6.4.5"
+    vue-demi "*"
+
 pirates@^4.0.1:
   version "4.0.1"
   resolved "https://registry.nlark.com/pirates/download/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
@@ -8172,6 +8180,11 @@ vscode-vue-languageservice@0.31.2:
     vscode-pug-languageservice "0.31.2"
     vscode-typescript-languageservice "0.31.2"
 
+vue-demi@*:
+  version "0.13.11"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
 vue-eslint-parser@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz#25e08b20a414551531f3e19f999902e1ecf45f13"
@@ -8214,13 +8227,6 @@ vue@^3.2.30:
     "@vue/server-renderer" "3.2.30"
     "@vue/shared" "3.2.30"
 
-vuex@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.nlark.com/vuex/download/vuex-4.0.2.tgz?cache=0&sync_timestamp=1623945218026&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvuex%2Fdownload%2Fvuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
-  integrity sha1-+Jbb1b8qDpY/AMZ+m2EN50nMrMk=
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
-
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.nlark.com/w3c-hr-time/download/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"