chore: migrate from Vuex to Pinia (doocs#236)

cuiyuheng · Jul 29, 2023 · 8e26697 · 8e26697
1 parent ae9f654
commit 8e26697
Show file tree

Hide file tree

Showing 10 changed files with 284 additions and 233 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,17 +26,15 @@
     "marked": "^4.0.18",
     "minio": "7.0.33",
     "node-fetch": "^3.2.10",
+    "pinia": "^2.1.6",
     "prettify": "^0.1.7",
     "qiniu-js": "^3.4.1",
     "uuid": "^8.3.2",
-    "vue": "^2.7.14",
-    "vuex": "^3.6.2"
+    "vue": "^2.7.14"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.19",
     "@vue/cli-plugin-eslint": "^4.5.19",
-    "@vue/cli-plugin-router": "^4.5.19",
-    "@vue/cli-plugin-vuex": "^4.5.12",
     "@vue/cli-service": "^4.5.15",
     "@vue/eslint-config-prettier": "^6.0.0",
     "async-validator": "^4.0.7",

diff --git a/src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue b/src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue
@@ -19,7 +19,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { useStore } from '@/stores'
 
 export default {
   props: {
@@ -32,7 +33,7 @@ export default {
     btnType() {
       return this.nightMode ? `default` : `primary`
     },
-    ...mapState({
+    ...mapState(useStore, {
       nightMode: (state) => state.nightMode,
     }),
   },

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -170,14 +170,16 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'pinia'
+import { useStore } from '@/stores'
+
 import { setFontSize, setColorWithCustomTemplate } from '@/assets/scripts/util'
 import { solveWeChatImage, mergeCss } from '@/assets/scripts/converter'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
 import config from '@/assets/scripts/config'
 import ResetDialog from './ResetDialog'
 import StyleOptionMenu from './StyleOptionMenu'
 import PostInfoDialog from './PostInfoDialog'
-import { mapState, mapMutations } from 'vuex'
 
 export default {
   name: `editor-header`,
@@ -236,7 +238,7 @@ export default {
     btnType() {
       return this.nightMode ? `default` : `primary`
     },
-    ...mapState({
+    ...mapState(useStore, {
       output: (state) => state.output,
       editor: (state) => state.editor,
       cssEditor: (state) => state.cssEditor,
@@ -408,7 +410,7 @@ export default {
       this.showResetConfirm = false
       this.editor.focus()
     },
-    ...mapMutations([
+    ...mapActions(useStore, [
       `setCurrentColor`,
       `setCiteStatus`,
       `themeChanged`,

diff --git a/src/components/CodemirrorEditor/InsertFormDialog.vue b/src/components/CodemirrorEditor/InsertFormDialog.vue
@@ -53,9 +53,11 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'pinia'
+import { useStore } from '@/stores'
+
 import config from '@/assets/scripts/config'
 import { createTable } from '@/assets/scripts/util'
-import { mapState, mapMutations } from 'vuex'
 
 export default {
   props: {
@@ -76,7 +78,7 @@ export default {
     btnType() {
       return this.nightMode ? `default` : `primary`
     },
-    ...mapState({
+    ...mapState(useStore, {
       nightMode: (state) => state.nightMode,
       editor: (state) => state.editor,
     }),
@@ -98,7 +100,7 @@ export default {
       this.$emit(`close`)
       this.editorRefresh()
     },
-    ...mapMutations([`editorRefresh`]),
+    ...mapActions(useStore, [`editorRefresh`]),
   },
 }
 </script>

diff --git a/src/components/RunLoading.vue b/src/components/RunLoading.vue
@@ -12,7 +12,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { useStore } from '@/stores'
 
 export default {
   name: `RunLoading`,
@@ -27,7 +28,7 @@ export default {
     }, 100)
   },
   computed: {
-    ...mapState({
+    ...mapState(useStore, {
       nightMode: ({ nightMode }) => nightMode,
     }),
   },

diff --git a/src/main.js b/src/main.js
@@ -1,27 +1,30 @@
 import Vue from 'vue'
-import App from './App'
-import store from './store'
 import ElementUI from 'element-ui'
+import { createPinia, PiniaVuePlugin } from 'pinia'
+
 import 'element-ui/lib/theme-chalk/index.css'
-import './plugins/element'
+
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/xq-light.css'
+
 import 'codemirror/mode/css/css'
 import 'codemirror/mode/markdown/markdown'
 import 'codemirror/addon/edit/closebrackets'
 import 'codemirror/addon/edit/matchbrackets'
 import 'codemirror/addon/selection/active-line'
-import 'codemirror/addon/hint/show-hint.js'
-import 'codemirror/addon/hint/css-hint.js'
+import 'codemirror/addon/hint/show-hint'
+import 'codemirror/addon/hint/css-hint'
+
+import './plugins/element'
+import App from './App'
 
-Vue.use(ElementUI)
+Vue.use(ElementUI).use(PiniaVuePlugin)
 
 Vue.config.productionTip = false
 
 App.mpType = `app`
 
-const app = new Vue({
-  store,
+new Vue({
   ...App,
-})
-app.$mount(`#app`)
+  pinia: createPinia(),
+}).$mount(`#app`)