From 29db40288eb963a4db02ce3864b700ff8d9e90f0 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Fri, 29 Jan 2021 10:32:32 +0800
Subject: [PATCH] =?UTF-8?q?vuex=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 public/index.html                             |  2 +-
 src/App.vue                                   |  5 +-
 src/configs/element.ts                        |  1 -
 src/hooks/useAlignElementToCanvas.ts          |  5 +-
 src/hooks/useCombineElement.ts                |  5 +-
 src/hooks/useCopyAndPasteElement.ts           |  5 +-
 src/hooks/useCreateElement.ts                 |  5 +-
 src/hooks/useDeleteElement.ts                 |  5 +-
 src/hooks/useHistorySnapshot.ts               |  5 +-
 src/hooks/useLockElement.ts                   |  5 +-
 src/hooks/useMoveElement.ts                   |  5 +-
 src/hooks/useOrderElement.ts                  |  5 +-
 src/hooks/usePasteTextClipboardData.ts        |  5 +-
 src/hooks/useScaleCanvas.ts                   |  5 +-
 src/hooks/useScreening.ts                     |  5 +-
 src/hooks/useSelectAllElement.ts              |  5 +-
 src/hooks/useSlideHandler.ts                  |  5 +-
 src/main.ts                                   |  4 +-
 src/store/actions.ts                          |  2 +-
 src/store/getters.ts                          |  2 +-
 src/store/index.ts                            | 65 ++-----------------
 src/store/mutations.ts                        |  2 +-
 src/store/state.ts                            | 56 ++++++++++++++++
 src/utils/crypto.ts                           |  2 +-
 src/views/Editor/Canvas/AlignmentLine.vue     |  5 +-
 src/views/Editor/Canvas/EditableElement.vue   |  5 +-
 .../Editor/Canvas/ElementCreateSelection.vue  |  5 +-
 src/views/Editor/Canvas/GridLines.vue         |  5 +-
 .../Canvas/Operate/ChartElementOperate.vue    |  5 +-
 .../Canvas/Operate/ImageElementOperate.vue    |  5 +-
 .../Canvas/Operate/LineElementOperate.vue     |  5 +-
 .../Canvas/Operate/MultiSelectOperate.vue     |  5 +-
 .../Canvas/Operate/ShapeElementOperate.vue    |  5 +-
 .../Canvas/Operate/TableElementOperate.vue    |  5 +-
 .../Canvas/Operate/TextElementOperate.vue     |  5 +-
 src/views/Editor/Canvas/Operate/index.vue     |  5 +-
 src/views/Editor/Canvas/SlideBackground.vue   |  5 +-
 .../Editor/Canvas/hooks/useDragElement.ts     |  5 +-
 .../Editor/Canvas/hooks/useDragLineElement.ts |  5 +-
 .../Editor/Canvas/hooks/useDropImageOrText.ts |  5 +-
 .../hooks/useInsertFromCreateSelection.ts     |  5 +-
 .../Editor/Canvas/hooks/useMouseSelection.ts  |  5 +-
 .../Editor/Canvas/hooks/useRotateElement.ts   |  5 +-
 .../Editor/Canvas/hooks/useScaleElement.ts    |  5 +-
 .../Editor/Canvas/hooks/useSelectElement.ts   |  5 +-
 .../Editor/Canvas/hooks/useViewportSize.ts    |  5 +-
 src/views/Editor/Canvas/index.vue             |  5 +-
 src/views/Editor/CanvasTool/index.vue         |  5 +-
 src/views/Editor/EditorHeader/index.vue       |  5 +-
 src/views/Editor/Thumbnails/index.vue         |  5 +-
 .../Editor/Toolbar/ElementAnimationPanel.vue  |  5 +-
 .../Editor/Toolbar/ElementPositionPanel.vue   |  5 +-
 .../ChartStylePanel/index.vue                 |  5 +-
 .../ElementStylePanel/ImageStylePanel.vue     |  5 +-
 .../ElementStylePanel/LineStylePanel.vue      |  5 +-
 .../ElementStylePanel/ShapeStylePanel.vue     |  5 +-
 .../ElementStylePanel/TableStylePanel.vue     |  5 +-
 .../ElementStylePanel/TextStylePanel.vue      |  5 +-
 .../Toolbar/ElementStylePanel/index.vue       |  5 +-
 .../Editor/Toolbar/MultiPositionPanel.vue     |  5 +-
 .../Editor/Toolbar/SlideAnimationPanel.vue    |  5 +-
 src/views/Editor/Toolbar/SlideStylePanel.vue  |  5 +-
 .../Editor/Toolbar/common/ElementOpacity.vue  |  5 +-
 .../Editor/Toolbar/common/ElementOutline.vue  |  5 +-
 .../Editor/Toolbar/common/ElementShadow.vue   |  5 +-
 src/views/Editor/Toolbar/index.vue            |  5 +-
 src/views/Editor/useHotkey.ts                 |  5 +-
 src/views/Editor/usePasteEvent.ts             |  5 +-
 src/views/Screen/ScreenElement.vue            |  5 +-
 src/views/Screen/SlideThumbnails.vue          |  5 +-
 src/views/Screen/index.vue                    |  5 +-
 .../ThumbnailSlide/ThumbnailElement.vue       |  5 +-
 .../element/ImageElement/ImageClipHandler.vue |  5 +-
 .../components/element/ImageElement/index.vue |  5 +-
 .../element/TableElement/EditableTable.vue    |  5 +-
 .../components/element/TableElement/index.vue |  5 +-
 .../components/element/TextElement/index.vue  |  5 +-
 78 files changed, 207 insertions(+), 271 deletions(-)
 create mode 100644 src/store/state.ts

diff --git a/package.json b/package.json
index 9596e4ab..25057d47 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pptist",
-  "version": "0.0.1",
+  "version": "0.0.1-dev",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/public/index.html b/public/index.html
index 0f6ee7ec..b2d03d1a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>PPTist v0.0.1-dev</title>
+    <title>PPTist</title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 349a5176..b8ad3d66 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,8 +5,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, ActionTypes, State } from '@/store'
+import { MutationTypes, ActionTypes, useStore } from '@/store'
 
 import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
@@ -18,7 +17,7 @@ export default defineComponent({
     Screen,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const screening = computed(() => store.state.screening)
 
     onMounted(() => {
diff --git a/src/configs/element.ts b/src/configs/element.ts
index 7389e364..e7f49a18 100644
--- a/src/configs/element.ts
+++ b/src/configs/element.ts
@@ -13,5 +13,4 @@ export const MIN_SIZE = {
   shape: 15,
   chart: 200,
   table: 20,
-  formula: 20,
 }
\ No newline at end of file
diff --git a/src/hooks/useAlignElementToCanvas.ts b/src/hooks/useAlignElementToCanvas.ts
index 4a6fe937..f9b4fb69 100644
--- a/src/hooks/useAlignElementToCanvas.ts
+++ b/src/hooks/useAlignElementToCanvas.ts
@@ -1,13 +1,12 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
 import { ElementAlignCommand, ElementAlignCommands } from '@/types/edit'
 import { getElementListRange } from '@/utils/element'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
 
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
diff --git a/src/hooks/useCombineElement.ts b/src/hooks/useCombineElement.ts
index a9b68b8d..8fd3fb09 100644
--- a/src/hooks/useCombineElement.ts
+++ b/src/hooks/useCombineElement.ts
@@ -1,12 +1,11 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
 import { createRandomCode } from '@/utils/common'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
diff --git a/src/hooks/useCopyAndPasteElement.ts b/src/hooks/useCopyAndPasteElement.ts
index 0f124e3e..e14f8980 100644
--- a/src/hooks/useCopyAndPasteElement.ts
+++ b/src/hooks/useCopyAndPasteElement.ts
@@ -1,6 +1,5 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement } from '@/types/slides'
 import { copyText, readClipboard } from '@/utils/clipboard'
 import { encrypt } from '@/utils/crypto'
@@ -9,7 +8,7 @@ import usePasteTextClipboardData from '@/hooks/usePasteTextClipboardData'
 import useDeleteElement from './useDeleteElement'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
 
diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts
index 43039613..dc84a340 100644
--- a/src/hooks/useCreateElement.ts
+++ b/src/hooks/useCreateElement.ts
@@ -1,6 +1,5 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { createRandomCode } from '@/utils/common'
 import { getImageSize } from '@/utils/image'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
@@ -24,7 +23,7 @@ interface LineElementPosition {
 }
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const themeColor = computed(() => store.state.theme.themeColor)
   const fontColor = computed(() => store.state.theme.fontColor)
 
diff --git a/src/hooks/useDeleteElement.ts b/src/hooks/useDeleteElement.ts
index e640529f..a57bcb75 100644
--- a/src/hooks/useDeleteElement.ts
+++ b/src/hooks/useDeleteElement.ts
@@ -1,11 +1,10 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { Slide } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
diff --git a/src/hooks/useHistorySnapshot.ts b/src/hooks/useHistorySnapshot.ts
index 5a0ce578..6f851e2d 100644
--- a/src/hooks/useHistorySnapshot.ts
+++ b/src/hooks/useHistorySnapshot.ts
@@ -1,10 +1,9 @@
-import { useStore } from 'vuex'
 import debounce from 'lodash/debounce'
 import throttle from 'lodash/throttle'
-import { State, ActionTypes } from '@/store'
+import { ActionTypes, useStore } from '@/store'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
 
   const addHistorySnapshot = debounce(function() {
     store.dispatch(ActionTypes.ADD_SNAPSHOT)
diff --git a/src/hooks/useLockElement.ts b/src/hooks/useLockElement.ts
index 6ffa14a4..a8aa2674 100644
--- a/src/hooks/useLockElement.ts
+++ b/src/hooks/useLockElement.ts
@@ -1,11 +1,10 @@
-import { useStore } from 'vuex'
 import { computed } from 'vue'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
diff --git a/src/hooks/useMoveElement.ts b/src/hooks/useMoveElement.ts
index a420e57c..74fec0c3 100644
--- a/src/hooks/useMoveElement.ts
+++ b/src/hooks/useMoveElement.ts
@@ -1,12 +1,11 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { Slide } from '@/types/slides'
 import { KEYS } from '@/configs/hotkey'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
diff --git a/src/hooks/useOrderElement.ts b/src/hooks/useOrderElement.ts
index 6c1c85da..a09bb021 100644
--- a/src/hooks/useOrderElement.ts
+++ b/src/hooks/useOrderElement.ts
@@ -1,12 +1,11 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
 import { ElementOrderCommand, ElementOrderCommands } from '@/types/edit'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
diff --git a/src/hooks/usePasteTextClipboardData.ts b/src/hooks/usePasteTextClipboardData.ts
index 64856a5e..343cb3ab 100644
--- a/src/hooks/usePasteTextClipboardData.ts
+++ b/src/hooks/usePasteTextClipboardData.ts
@@ -1,6 +1,5 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { decrypt } from '@/utils/crypto'
 import { PPTElement, Slide } from '@/types/slides'
 import { createRandomCode } from '@/utils/common'
@@ -12,7 +11,7 @@ interface PasteTextClipboardDataOptions {
 }
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
diff --git a/src/hooks/useScaleCanvas.ts b/src/hooks/useScaleCanvas.ts
index 14c7e689..25dfbb62 100644
--- a/src/hooks/useScaleCanvas.ts
+++ b/src/hooks/useScaleCanvas.ts
@@ -1,9 +1,8 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const canvasPercentage = computed(() => store.state.canvasPercentage)
 
   const scaleCanvas = (command: '+' | '-') => {
diff --git a/src/hooks/useScreening.ts b/src/hooks/useScreening.ts
index 6cbcd0b7..1a2d880f 100644
--- a/src/hooks/useScreening.ts
+++ b/src/hooks/useScreening.ts
@@ -1,9 +1,8 @@
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { enterFullscreen, exitFullscreen, isFullscreen } from '@/utils/fullscreen'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
 
   const enterScreening = () => {
     enterFullscreen()
diff --git a/src/hooks/useSelectAllElement.ts b/src/hooks/useSelectAllElement.ts
index 9d288c07..688f3c2e 100644
--- a/src/hooks/useSelectAllElement.ts
+++ b/src/hooks/useSelectAllElement.ts
@@ -1,10 +1,9 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { Slide } from '@/types/slides'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const selectAllElement = () => {
diff --git a/src/hooks/useSlideHandler.ts b/src/hooks/useSlideHandler.ts
index 2ba4ab6d..bd834622 100644
--- a/src/hooks/useSlideHandler.ts
+++ b/src/hooks/useSlideHandler.ts
@@ -1,6 +1,5 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { Slide } from '@/types/slides'
 import { createRandomCode } from '@/utils/common'
 import { copyText, readClipboard } from '@/utils/clipboard'
@@ -11,7 +10,7 @@ import usePasteTextClipboardData from '@/hooks/usePasteTextClipboardData'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const slideIndex = computed(() => store.state.slideIndex)
   const theme = computed(() => store.state.theme)
   const slidesLength = computed(() => store.state.slides.length)
diff --git a/src/main.ts b/src/main.ts
index 74b10a35..c89a4acc 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import store from './store'
+import { store, key } from './store'
 
 import '@icon-park/vue-next/styles/index.css'
 import 'prosemirror-view/style/prosemirror.css'
@@ -71,5 +71,5 @@ app.component('CheckboxButton', CheckboxButton)
 app.component('CheckboxButtonGroup', CheckboxButtonGroup)
 app.component('ColorPicker', ColorPicker)
 
-app.use(store)
+app.use(store, key)
 app.mount('#app')
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 20804eed..461e9dd1 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -1,6 +1,6 @@
 import { ActionTree } from 'vuex'
 import { IndexableTypeArray } from 'dexie'
-import { State } from './index'
+import { State } from './state'
 import { ActionTypes, MutationTypes } from './constants'
 import db, { Snapshot } from '@/utils/database'
 
diff --git a/src/store/getters.ts b/src/store/getters.ts
index 39854f26..088d1624 100644
--- a/src/store/getters.ts
+++ b/src/store/getters.ts
@@ -1,5 +1,5 @@
 import { GetterTree } from 'vuex'
-import { State } from './index'
+import { State } from './state'
 
 export const getters: GetterTree<State, State> = {
   currentSlide(state) {
diff --git a/src/store/index.ts b/src/store/index.ts
index be2b46b2..0717a471 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,71 +1,20 @@
-import { createStore } from 'vuex'
+import { InjectionKey } from 'vue'
+import { createStore, Store, useStore as baseUseStore } from 'vuex'
+import { state, State } from './state'
 import { getters } from './getters'
 import { actions } from './actions'
 import { mutations } from './mutations'
 import { MutationTypes, ActionTypes } from './constants'
 
-import { Slide, SlideTheme } from '@/types/slides'
-import { CreatingElement } from '@/types/edit'
-import { ToolbarState } from '@/types/toolbar'
-import { slides } from '@/mocks/index'
-import { SYS_FONTS } from '@/configs/font'
-
 export { MutationTypes, ActionTypes }
 
-export interface State {
-  activeElementIdList: string[];
-  handleElementId: string;
-  canvasPercentage: number;
-  canvasScale: number;
-  thumbnailsFocus: boolean;
-  editorAreaFocus: boolean;
-  disableHotkeys: boolean;
-  showGridLines: boolean;
-  creatingElement: CreatingElement | null;
-  availableFonts: typeof SYS_FONTS;
-  toolbarState: ToolbarState;
-  theme: SlideTheme;
-  slides: Slide[];
-  slideIndex: number;
-  snapshotCursor: number;
-  snapshotLength: number;
-  ctrlKeyState: boolean;
-  shiftKeyState: boolean;
-  screening: boolean;
-  clipingImageElementId: string;
-}
+export const key: InjectionKey<Store<State>> = Symbol()
 
-const state: State = {
-  activeElementIdList: [],
-  handleElementId: '',
-  canvasPercentage: 90,
-  canvasScale: 1,
-  thumbnailsFocus: false,
-  editorAreaFocus: false,
-  disableHotkeys: false,
-  showGridLines: false,
-  creatingElement: null,
-  availableFonts: [],
-  toolbarState: 'slideStyle',
-  theme: {
-    themeColor: '#d14424',
-    fontColor: '#333',
-    fontName: '微软雅黑',
-    backgroundColor: '#fff',
-  },
-  slides: slides,
-  slideIndex: 0,
-  snapshotCursor: -1,
-  snapshotLength: 0,
-  ctrlKeyState: false,
-  shiftKeyState: false,
-  screening: false,
-  clipingImageElementId: '',
-}
-
-export default createStore({
+export const store = createStore<State>({
   state,
   getters,
   mutations,
   actions,
 })
+
+export const useStore = () => baseUseStore(key)
\ No newline at end of file
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 0209d9c6..a079f8b3 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -1,7 +1,7 @@
 import { MutationTree } from 'vuex'
 import omit from 'lodash/omit'
 import { MutationTypes } from './constants'
-import { State } from './index'
+import { State } from './state'
 import { Slide, PPTElement, SlideTheme } from '@/types/slides'
 import { CreatingElement } from '@/types/edit'
 import { SYS_FONTS } from '@/configs/font'
diff --git a/src/store/state.ts b/src/store/state.ts
new file mode 100644
index 00000000..c7d18155
--- /dev/null
+++ b/src/store/state.ts
@@ -0,0 +1,56 @@
+import { Slide, SlideTheme } from '@/types/slides'
+import { CreatingElement } from '@/types/edit'
+import { ToolbarState } from '@/types/toolbar'
+import { slides } from '@/mocks/index'
+import { SYS_FONTS } from '@/configs/font'
+
+export interface State {
+  activeElementIdList: string[];
+  handleElementId: string;
+  canvasPercentage: number;
+  canvasScale: number;
+  thumbnailsFocus: boolean;
+  editorAreaFocus: boolean;
+  disableHotkeys: boolean;
+  showGridLines: boolean;
+  creatingElement: CreatingElement | null;
+  availableFonts: typeof SYS_FONTS;
+  toolbarState: ToolbarState;
+  theme: SlideTheme;
+  slides: Slide[];
+  slideIndex: number;
+  snapshotCursor: number;
+  snapshotLength: number;
+  ctrlKeyState: boolean;
+  shiftKeyState: boolean;
+  screening: boolean;
+  clipingImageElementId: string;
+}
+
+export const state: State = {
+  activeElementIdList: [],
+  handleElementId: '',
+  canvasPercentage: 90,
+  canvasScale: 1,
+  thumbnailsFocus: false,
+  editorAreaFocus: false,
+  disableHotkeys: false,
+  showGridLines: false,
+  creatingElement: null,
+  availableFonts: [],
+  toolbarState: 'slideStyle',
+  theme: {
+    themeColor: '#d14424',
+    fontColor: '#333',
+    fontName: '微软雅黑',
+    backgroundColor: '#fff',
+  },
+  slides: slides,
+  slideIndex: 0,
+  snapshotCursor: -1,
+  snapshotLength: 0,
+  ctrlKeyState: false,
+  shiftKeyState: false,
+  screening: false,
+  clipingImageElementId: '',
+}
\ No newline at end of file
diff --git a/src/utils/crypto.ts b/src/utils/crypto.ts
index 45986ef5..9278af63 100644
--- a/src/utils/crypto.ts
+++ b/src/utils/crypto.ts
@@ -1,6 +1,6 @@
 import CryptoJS from 'crypto-js'
 
-const CRYPTO_KEY = 'zxc_ppt_online_editor'
+const CRYPTO_KEY = 'pptist'
 
 // 加密函数
 export const encrypt = (msg: string) => {
diff --git a/src/views/Editor/Canvas/AlignmentLine.vue b/src/views/Editor/Canvas/AlignmentLine.vue
index b39e7bf9..39cd5706 100644
--- a/src/views/Editor/Canvas/AlignmentLine.vue
+++ b/src/views/Editor/Canvas/AlignmentLine.vue
@@ -6,8 +6,7 @@
 
 <script lang="ts">
 import { computed, PropType, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { AlignmentLineAxis } from '@/types/edit'
 
 export default defineComponent({
@@ -27,7 +26,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
 
     const left = computed(() => props.axis.x * canvasScale.value + 'px')
diff --git a/src/views/Editor/Canvas/EditableElement.vue b/src/views/Editor/Canvas/EditableElement.vue
index 7e7e8816..86617308 100644
--- a/src/views/Editor/Canvas/EditableElement.vue
+++ b/src/views/Editor/Canvas/EditableElement.vue
@@ -20,8 +20,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { ElementTypes, PPTElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 
@@ -62,7 +61,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const theme = computed(() => store.state.theme)
 
     const currentElementComponent = computed(() => {
diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue
index 534577b9..675e507d 100644
--- a/src/views/Editor/Canvas/ElementCreateSelection.vue
+++ b/src/views/Editor/Canvas/ElementCreateSelection.vue
@@ -29,13 +29,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 
 export default defineComponent({
   name: 'element-create-selection',
   setup(props, { emit }) {
-    const store = useStore<State>()
+    const store = useStore()
     const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
     const creatingElement = computed(() => store.state.creatingElement)
 
diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue
index 0ca5e593..23fb3cfa 100644
--- a/src/views/Editor/Canvas/GridLines.vue
+++ b/src/views/Editor/Canvas/GridLines.vue
@@ -16,16 +16,15 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { useStore } from 'vuex'
 import tinycolor from 'tinycolor2'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 import { SlideBackground } from '@/types/slides'
 
 export default defineComponent({
   name: 'grid-lines',
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
     const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background)
 
diff --git a/src/views/Editor/Canvas/Operate/ChartElementOperate.vue b/src/views/Editor/Canvas/Operate/ChartElementOperate.vue
index 8195b757..6e5d0c58 100644
--- a/src/views/Editor/Canvas/Operate/ChartElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/ChartElementOperate.vue
@@ -22,8 +22,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 
 import { PPTShapeElement } from '@/types/slides'
 import { OperateResizeHandler } from '@/types/edit'
@@ -58,7 +57,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
 
     const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
diff --git a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
index 5e8b4487..71198ae9 100644
--- a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
@@ -27,8 +27,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { PPTImageElement } from '@/types/slides'
 import { OperateResizeHandler } from '@/types/edit'
 import useCommonOperate from '../hooks/useCommonOperate'
@@ -68,7 +67,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
     const clipingImageElementId = computed(() => store.state.clipingImageElementId)
     const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
diff --git a/src/views/Editor/Canvas/Operate/LineElementOperate.vue b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
index f0340128..ab8cfe7a 100644
--- a/src/views/Editor/Canvas/Operate/LineElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
@@ -15,8 +15,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 
 import { PPTLineElement } from '@/types/slides'
 import { OperateLineHandler, OperateLineHandlers } from '@/types/edit'
@@ -48,7 +47,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
 
     const resizeHandlers = computed(() => {
diff --git a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue b/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
index 01892924..c965d37b 100644
--- a/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
+++ b/src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
@@ -22,8 +22,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, reactive, PropType, watchEffect, toRefs } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { PPTElement, ElementTypes } from '@/types/slides'
 import { getElementListRange } from '@/utils/element'
 import { OperateResizeHandler, MultiSelectRange } from '@/types/edit'
@@ -49,7 +48,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const activeElementIdList = computed(() => store.state.activeElementIdList)
     const canvasScale = computed(() => store.state.canvasScale)
     const localActiveElementList = computed(() => props.elementList.filter(el => activeElementIdList.value.includes(el.id)))
diff --git a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue b/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
index af874440..efe93d5d 100644
--- a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
@@ -27,8 +27,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 
 import { PPTShapeElement } from '@/types/slides'
 import { OperateResizeHandler } from '@/types/edit'
@@ -69,7 +68,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
 
     const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
diff --git a/src/views/Editor/Canvas/Operate/TableElementOperate.vue b/src/views/Editor/Canvas/Operate/TableElementOperate.vue
index b908dbcf..e2d92a47 100644
--- a/src/views/Editor/Canvas/Operate/TableElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/TableElementOperate.vue
@@ -22,8 +22,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 
 import { PPTTableElement } from '@/types/slides'
 import { OperateResizeHandler } from '@/types/edit'
@@ -58,7 +57,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
 
     const outlineWidth = computed(() => props.elementInfo.outline.width || 1)
diff --git a/src/views/Editor/Canvas/Operate/TextElementOperate.vue b/src/views/Editor/Canvas/Operate/TextElementOperate.vue
index 79cb50eb..3518ec46 100644
--- a/src/views/Editor/Canvas/Operate/TextElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/TextElementOperate.vue
@@ -27,8 +27,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 
 import { PPTTextElement } from '@/types/slides'
 import { OperateResizeHandler } from '@/types/edit'
@@ -69,7 +68,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
 
     const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
diff --git a/src/views/Editor/Canvas/Operate/index.vue b/src/views/Editor/Canvas/Operate/index.vue
index 0a899f76..6aadf828 100644
--- a/src/views/Editor/Canvas/Operate/index.vue
+++ b/src/views/Editor/Canvas/Operate/index.vue
@@ -31,8 +31,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { ElementTypes, PPTElement, Slide } from '@/types/slides'
 import { OperateLineHandler, OperateResizeHandler } from '@/types/edit'
 
@@ -80,7 +79,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
     const toolbarState = computed(() => store.state.toolbarState)
     const currentSlide = computed<Slide>(() => store.getters.currentSlide)
diff --git a/src/views/Editor/Canvas/SlideBackground.vue b/src/views/Editor/Canvas/SlideBackground.vue
index 3f924896..3bb6a2d6 100644
--- a/src/views/Editor/Canvas/SlideBackground.vue
+++ b/src/views/Editor/Canvas/SlideBackground.vue
@@ -9,8 +9,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { SlideBackground } from '@/types/slides'
 import GridLines from './GridLines.vue'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
@@ -21,7 +20,7 @@ export default defineComponent({
     GridLines,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const showGridLines = computed(() => store.state.showGridLines)
     const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background)
 
diff --git a/src/views/Editor/Canvas/hooks/useDragElement.ts b/src/views/Editor/Canvas/hooks/useDragElement.ts
index 6646d15a..95553fec 100644
--- a/src/views/Editor/Canvas/hooks/useDragElement.ts
+++ b/src/views/Editor/Canvas/hooks/useDragElement.ts
@@ -1,6 +1,5 @@
 import { Ref, computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { ElementTypes, PPTElement } from '@/types/slides'
 import { AlignmentLineProps } from '@/types/edit'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
@@ -12,7 +11,7 @@ export default (
   activeGroupElementId: Ref<string>,
   alignmentLines: Ref<AlignmentLineProps[]>,
 ) => {
-  const store = useStore<State>()
+  const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const canvasScale = computed(() => store.state.canvasScale)
 
diff --git a/src/views/Editor/Canvas/hooks/useDragLineElement.ts b/src/views/Editor/Canvas/hooks/useDragLineElement.ts
index 02890ad6..6b5b4ae4 100644
--- a/src/views/Editor/Canvas/hooks/useDragLineElement.ts
+++ b/src/views/Editor/Canvas/hooks/useDragLineElement.ts
@@ -1,6 +1,5 @@
 import { Ref, computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement, PPTLineElement } from '@/types/slides'
 import { OperateLineHandler, OperateLineHandlers } from '@/types/edit'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -11,7 +10,7 @@ interface AdsorptionPoint {
 }
 
 export default (elementList: Ref<PPTElement[]>) => {
-  const store = useStore<State>()
+  const store = useStore()
   const canvasScale = computed(() => store.state.canvasScale)
 
   const { addHistorySnapshot } = useHistorySnapshot()
diff --git a/src/views/Editor/Canvas/hooks/useDropImageOrText.ts b/src/views/Editor/Canvas/hooks/useDropImageOrText.ts
index 2a466a9c..0240a04b 100644
--- a/src/views/Editor/Canvas/hooks/useDropImageOrText.ts
+++ b/src/views/Editor/Canvas/hooks/useDropImageOrText.ts
@@ -1,11 +1,10 @@
 import { computed, onMounted, onUnmounted, Ref } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { getImageDataURL } from '@/utils/image'
 import useCreateElement from '@/hooks/useCreateElement'
 
 export default (elementRef: Ref<HTMLElement | undefined>) => {
-  const store = useStore<State>()
+  const store = useStore()
   const disableHotkeys = computed(() => store.state.disableHotkeys)
 
   const { createImageElement } = useCreateElement()
diff --git a/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts b/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts
index 9cfa511d..d665dce0 100644
--- a/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts
+++ b/src/views/Editor/Canvas/hooks/useInsertFromCreateSelection.ts
@@ -1,11 +1,10 @@
 import { computed, Ref } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { CreateElementSelectionData, CreatingLineElement, CreatingShapeElement } from '@/types/edit'
 import useCreateElement from '@/hooks/useCreateElement'
 
 export default (viewportRef: Ref<HTMLElement | undefined>) => {
-  const store = useStore<State>()
+  const store = useStore()
   const canvasScale = computed(() => store.state.canvasScale)
   const creatingElement = computed(() => store.state.creatingElement)
 
diff --git a/src/views/Editor/Canvas/hooks/useMouseSelection.ts b/src/views/Editor/Canvas/hooks/useMouseSelection.ts
index baf46920..b6a5951a 100644
--- a/src/views/Editor/Canvas/hooks/useMouseSelection.ts
+++ b/src/views/Editor/Canvas/hooks/useMouseSelection.ts
@@ -1,11 +1,10 @@
 import { Ref, reactive, computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement } from '@/types/slides'
 import { getElementRange } from '@/utils/element'
 
 export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => {
-  const store = useStore<State>()
+  const store = useStore()
   const canvasScale = computed(() => store.state.canvasScale)
 
   const mouseSelectionState = reactive({
diff --git a/src/views/Editor/Canvas/hooks/useRotateElement.ts b/src/views/Editor/Canvas/hooks/useRotateElement.ts
index 37942ecc..f9ef696c 100644
--- a/src/views/Editor/Canvas/hooks/useRotateElement.ts
+++ b/src/views/Editor/Canvas/hooks/useRotateElement.ts
@@ -1,6 +1,5 @@
 import { Ref, computed } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement, PPTTextElement, PPTImageElement, PPTShapeElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -14,7 +13,7 @@ const getAngleFromCoordinate = (x: number, y: number) => {
 }
 
 export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | undefined>) => {
-  const store = useStore<State>()
+  const store = useStore()
   const canvasScale = computed(() => store.state.canvasScale)
 
   const { addHistorySnapshot } = useHistorySnapshot()
diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts
index 6b1d9c22..bcd02ee2 100644
--- a/src/views/Editor/Canvas/hooks/useScaleElement.ts
+++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts
@@ -1,6 +1,5 @@
 import { computed, Ref } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { ElementTypes, PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides'
 import { OperateResizeHandlers, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
 import emitter, { EmitterEvents } from '@/utils/emitter'
@@ -89,7 +88,7 @@ export default (
   activeGroupElementId: Ref<string>,
   alignmentLines: Ref<AlignmentLineProps[]>,
 ) => {
-  const store = useStore<State>()
+  const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
   const canvasScale = computed(() => store.state.canvasScale)
diff --git a/src/views/Editor/Canvas/hooks/useSelectElement.ts b/src/views/Editor/Canvas/hooks/useSelectElement.ts
index d9e1d2a7..8dcadbe4 100644
--- a/src/views/Editor/Canvas/hooks/useSelectElement.ts
+++ b/src/views/Editor/Canvas/hooks/useSelectElement.ts
@@ -1,7 +1,6 @@
 import { Ref, computed } from 'vue'
-import { useStore } from 'vuex'
 import uniq from 'lodash/uniq'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement } from '@/types/slides'
 
 export default (
@@ -9,7 +8,7 @@ export default (
   activeGroupElementId: Ref<string>,
   moveElement: (e: MouseEvent, element: PPTElement) => void,
 ) => {
-  const store = useStore<State>()
+  const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
   const handleElementId = computed(() => store.state.handleElementId)
   const editorAreaFocus = computed(() => store.state.editorAreaFocus)
diff --git a/src/views/Editor/Canvas/hooks/useViewportSize.ts b/src/views/Editor/Canvas/hooks/useViewportSize.ts
index 318d2180..912eff29 100644
--- a/src/views/Editor/Canvas/hooks/useViewportSize.ts
+++ b/src/views/Editor/Canvas/hooks/useViewportSize.ts
@@ -1,13 +1,12 @@
 import { ref, computed, onMounted, onUnmounted, Ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 
 export default (canvasRef: Ref<HTMLElement | undefined>) => {
   const viewportLeft = ref(0)
   const viewportTop = ref(0)
 
-  const store = useStore<State>()
+  const store = useStore()
   const canvasPercentage = computed(() => store.state.canvasPercentage)
 
   const setViewportSize = () => {
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index c8b64c91..2c9806b9 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -76,9 +76,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, provide, ref, watch, watchEffect } from 'vue'
-import { useStore } from 'vuex'
 import throttle from 'lodash/throttle'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import { PPTElement, Slide } from '@/types/slides'
 import { AlignmentLineProps } from '@/types/edit'
@@ -119,7 +118,7 @@ export default defineComponent({
     Operate,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
 
     const activeElementIdList = computed(() => store.state.activeElementIdList)
     const handleElementId = computed(() => store.state.handleElementId)
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index af158b4a..26d1d6a9 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -68,8 +68,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { getImageDataURL } from '@/utils/image'
 import { ShapePoolItem } from '@/configs/shapes'
 import { LinePoolItem } from '@/configs/lines'
@@ -91,7 +90,7 @@ export default defineComponent({
     TableGenerator,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
     const canUndo = computed(() => store.getters.canUndo)
     const canRedo = computed(() => store.getters.canRedo)
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 70daa79c..967484b6 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -58,8 +58,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import useScreening from '@/hooks/useScreening'
 import useSlideHandler from '@/hooks/useSlideHandler'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -67,7 +66,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 export default defineComponent({
   name: 'editor-header',
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
 
     const { enterScreening, enterScreeningFromStart } = useScreening()
     const { createSlide, deleteSlide } = useSlideHandler()
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index 07209bf7..7808e6b8 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -33,8 +33,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { fillDigit } from '@/utils/common'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import useSlideHandler from '@/hooks/useSlideHandler'
@@ -49,7 +48,7 @@ export default defineComponent({
     ThumbnailSlide,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const slides = computed(() => store.state.slides)
     const slideIndex = computed(() => store.state.slideIndex)
 
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index 60692a47..29e4ad66 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -68,8 +68,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTAnimation, PPTElement, Slide } from '@/types/slides'
 import { ANIMATIONS } from '@/configs/animation'
 import { ELEMENT_TYPE } from '@/configs/element'
@@ -90,7 +89,7 @@ export default defineComponent({
     Draggable,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTElement>(() => store.getters.handleElement)
     const currentSlideAnimations = computed<PPTAnimation[] | null>(() => store.getters.currentSlideAnimations)
     const currentSlide = computed<Slide>(() => store.getters.currentSlide)
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 3a667ba0..3d3c4cec 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -134,9 +134,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
-import { useStore } from 'vuex'
 import round from 'lodash/round'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement } from '@/types/slides'
 import { MIN_SIZE } from '@/configs/element'
 import useOrderElement from '@/hooks/useOrderElement'
@@ -146,7 +145,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 export default defineComponent({
   name: 'element-positopn-panel',
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const left = ref(0)
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index 3fe38563..fb7c8cfd 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -101,8 +101,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
 import { IBarChartOptions, ILineChartOptions, IPieChartOptions } from 'chartist'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { ChartData, PPTChartElement } from '@/types/slides'
 import { CHART_THEME_COLORS } from '@/configs/chartTheme'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -119,7 +118,7 @@ export default defineComponent({
     ColorButton,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTChartElement>(() => store.getters.handleElement)
 
     const chartDataEditorVisible = ref(false)
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index 9f215f50..398ec181 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
@@ -93,8 +93,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTImageElement } from '@/types/slides'
 import { CLIPPATHS } from '@/configs/imageClip'
 import { getImageDataURL } from '@/utils/image'
@@ -164,7 +163,7 @@ export default defineComponent({
     ElementShadow,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTImageElement>(() => store.getters.handleElement)
 
     const clipPanelVisible = ref(false)
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
index ddef8474..4fff8de6 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
@@ -64,8 +64,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTLineElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -79,7 +78,7 @@ export default defineComponent({
     ColorButton,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTLineElement>(() => store.getters.handleElement)
 
     const { addHistorySnapshot } = useHistorySnapshot()
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index ccf78b6c..364347ce 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -79,8 +79,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTShapeElement, ShapeGradient } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -98,7 +97,7 @@ export default defineComponent({
     ColorButton,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTShapeElement>(() => store.getters.handleElement)
 
     const fill = ref<string>()
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index e8781a7a..3fe21d94 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -186,8 +186,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTTableElement, TableCell, TableCellStyle, TableTheme } from '@/types/slides'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 import { createRandomCode } from '@/utils/common'
@@ -205,7 +204,7 @@ export default defineComponent({
     ColorButton,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTTableElement>(() => store.getters.handleElement)
 
     const textAttrs = ref({
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 9c4dd2e3..3bae31a1 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -219,8 +219,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTTextElement } from '@/types/slides'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 import { TextAttrs } from '@/prosemirror/utils'
@@ -319,7 +318,7 @@ export default defineComponent({
     ElementShadow,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTTextElement>(() => store.getters.handleElement)
 
     const fill = ref<string>()
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/index.vue
index 9d6cd25d..ed4f4eb5 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/index.vue
@@ -9,8 +9,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { ElementTypes, PPTElement } from '@/types/slides'
 
 import TextStylePanel from './TextStylePanel.vue'
@@ -23,7 +22,7 @@ import TableStylePanel from './TableStylePanel.vue'
 export default defineComponent({
   name: 'element-style-panel',
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const currentPanelComponent = computed(() => {
diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue
index 4e40af34..77ee742e 100644
--- a/src/views/Editor/Toolbar/MultiPositionPanel.vue
+++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue
@@ -34,8 +34,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement, Slide } from '@/types/slides'
 import { ElementAlignCommand, ElementAlignCommands } from '@/types/edit'
 import { getElementListRange } from '@/utils/element'
@@ -45,7 +44,7 @@ import useCombineElement from '@/hooks/useCombineElement'
 export default defineComponent({
   name: 'multi-position-panel',
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const activeElementIdList = computed(() => store.state.activeElementIdList)
     const activeElementList = computed<PPTElement[]>(() => store.getters.activeElementList)
     const currentSlide = computed<Slide>(() => store.getters.currentSlide)
diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
index 1d9c0d56..034f1833 100644
--- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
@@ -18,15 +18,14 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { Slide } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default defineComponent({
   name: 'slide-animation-panel',
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const slides = computed(() => store.state.slides)
     const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue
index 95dd1c02..90deb57f 100644
--- a/src/views/Editor/Toolbar/SlideStylePanel.vue
+++ b/src/views/Editor/Toolbar/SlideStylePanel.vue
@@ -174,8 +174,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { Slide, SlideBackground, SlideTheme } from '@/types/slides'
 import { PRESET_THEMES } from '@/configs/theme'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -191,7 +190,7 @@ export default defineComponent({
     ColorButton,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const slides = computed(() => store.state.slides)
     const theme = computed(() => store.state.theme)
     const currentSlide = computed<Slide>(() => store.getters.currentSlide)
diff --git a/src/views/Editor/Toolbar/common/ElementOpacity.vue b/src/views/Editor/Toolbar/common/ElementOpacity.vue
index 2d182271..a24cabbd 100644
--- a/src/views/Editor/Toolbar/common/ElementOpacity.vue
+++ b/src/views/Editor/Toolbar/common/ElementOpacity.vue
@@ -16,15 +16,14 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default defineComponent({
   name: 'element-opacity',
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const opacity = ref<number>()
diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue
index f02d5a77..ecc6bc64 100644
--- a/src/views/Editor/Toolbar/common/ElementOutline.vue
+++ b/src/views/Editor/Toolbar/common/ElementOutline.vue
@@ -47,8 +47,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement, PPTElementOutline } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -66,7 +65,7 @@ export default defineComponent({
     },
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const outline = ref<PPTElementOutline>()
diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue
index c5af4d46..502064ff 100644
--- a/src/views/Editor/Toolbar/common/ElementShadow.vue
+++ b/src/views/Editor/Toolbar/common/ElementShadow.vue
@@ -58,8 +58,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTElement, PPTElementShadow } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -71,7 +70,7 @@ export default defineComponent({
     ColorButton,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const handleElement = computed<PPTElement>(() => store.getters.handleElement)
 
     const shadow = ref<PPTElementShadow>()
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index 038ae7f1..9f75da91 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/src/views/Editor/Toolbar/index.vue
@@ -17,8 +17,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, watch } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { ToolbarState, ToolbarStates } from '@/types/toolbar'
 
 import ElementStylePanel from './ElementStylePanel/index.vue'
@@ -31,7 +30,7 @@ import MultiPositionPanel from './MultiPositionPanel.vue'
 export default defineComponent({
   name: 'toolbar',
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const toolbarState = computed(() => store.state.toolbarState)
 
     const elementTabs = [
diff --git a/src/views/Editor/useHotkey.ts b/src/views/Editor/useHotkey.ts
index e8bdaa86..c3cbee40 100644
--- a/src/views/Editor/useHotkey.ts
+++ b/src/views/Editor/useHotkey.ts
@@ -1,6 +1,5 @@
 import { computed, onMounted, onUnmounted } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { KEYS } from '@/configs/hotkey'
 
 import useSlideHandler from '@/hooks/useSlideHandler'
@@ -14,7 +13,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import useScreening from '@/hooks/useScreening'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
 
   const ctrlKeyActive = computed(() => store.state.ctrlKeyState)
   const shiftKeyActive = computed(() => store.state.shiftKeyState)
diff --git a/src/views/Editor/usePasteEvent.ts b/src/views/Editor/usePasteEvent.ts
index 2b8714dd..a572b351 100644
--- a/src/views/Editor/usePasteEvent.ts
+++ b/src/views/Editor/usePasteEvent.ts
@@ -1,12 +1,11 @@
 import { computed, onMounted, onUnmounted } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { getImageDataURL } from '@/utils/image'
 import usePasteTextClipboardData from '@/hooks/usePasteTextClipboardData'
 import useCreateElement from '@/hooks/useCreateElement'
 
 export default () => {
-  const store = useStore<State>()
+  const store = useStore()
   const editorAreaFocus = computed(() => store.state.editorAreaFocus)
   const thumbnailsFocus = computed(() => store.state.thumbnailsFocus)
   const disableHotkeys = computed(() => store.state.disableHotkeys)
diff --git a/src/views/Screen/ScreenElement.vue b/src/views/Screen/ScreenElement.vue
index e2340197..e6ac44ae 100644
--- a/src/views/Screen/ScreenElement.vue
+++ b/src/views/Screen/ScreenElement.vue
@@ -17,8 +17,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { ElementTypes, PPTElement, Slide } from '@/types/slides'
 
 import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
@@ -57,7 +56,7 @@ export default defineComponent({
       return elementTypeMap[props.elementInfo.type] || null
     })
 
-    const store = useStore<State>()
+    const store = useStore()
     const theme = computed(() => store.state.theme)
     const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
diff --git a/src/views/Screen/SlideThumbnails.vue b/src/views/Screen/SlideThumbnails.vue
index 0a564ef6..33362af6 100644
--- a/src/views/Screen/SlideThumbnails.vue
+++ b/src/views/Screen/SlideThumbnails.vue
@@ -14,8 +14,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
@@ -30,7 +29,7 @@ export default defineComponent({
     },
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const slides = computed(() => store.state.slides)
     const slideIndex = computed(() => store.state.slideIndex)
 
diff --git a/src/views/Screen/index.vue b/src/views/Screen/index.vue
index 40af03b1..da07c601 100644
--- a/src/views/Screen/index.vue
+++ b/src/views/Screen/index.vue
@@ -61,9 +61,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, provide, ref } from 'vue'
-import { useStore } from 'vuex'
 import throttle from 'lodash/throttle'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { Slide } from '@/types/slides'
 import { VIEWPORT_ASPECT_RATIO, VIEWPORT_SIZE } from '@/configs/canvas'
 import { KEYS } from '@/configs/hotkey'
@@ -83,7 +82,7 @@ export default defineComponent({
     WritingBoardTool,
   },
   setup() {
-    const store = useStore<State>()
+    const store = useStore()
     const slides = computed(() => store.state.slides)
     const slideIndex = computed(() => store.state.slideIndex)
     const currentSlide = computed<Slide>(() => store.getters.currentSlide)
diff --git a/src/views/components/ThumbnailSlide/ThumbnailElement.vue b/src/views/components/ThumbnailSlide/ThumbnailElement.vue
index 760e611a..45083bad 100644
--- a/src/views/components/ThumbnailSlide/ThumbnailElement.vue
+++ b/src/views/components/ThumbnailSlide/ThumbnailElement.vue
@@ -17,8 +17,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { ElementTypes, PPTElement } from '@/types/slides'
 
 import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
@@ -41,7 +40,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const theme = computed(() => store.state.theme)
 
     const currentElementComponent = computed(() => {
diff --git a/src/views/components/element/ImageElement/ImageClipHandler.vue b/src/views/components/element/ImageElement/ImageClipHandler.vue
index 08654438..6c6b5d1d 100644
--- a/src/views/components/element/ImageElement/ImageClipHandler.vue
+++ b/src/views/components/element/ImageElement/ImageClipHandler.vue
@@ -53,8 +53,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { useStore } from '@/store'
 import { KEYS } from '@/configs/hotkey'
 import { ImageClipData, ImageClipDataRange, ImageClipedEmitData } from '@/types/edit'
 
@@ -92,7 +91,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
 
     const topImgWrapperPosition = reactive({
diff --git a/src/views/components/element/ImageElement/index.vue b/src/views/components/element/ImageElement/index.vue
index bad6c857..2342511c 100644
--- a/src/views/components/element/ImageElement/index.vue
+++ b/src/views/components/element/ImageElement/index.vue
@@ -72,8 +72,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTImageElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import { CLIPPATHS, ClipPathTypes } from '@/configs/imageClip'
@@ -107,7 +106,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const clipingImageElementId = computed(() => store.state.clipingImageElementId)
     const isCliping = computed(() => clipingImageElementId.value === props.elementInfo.id)
 
diff --git a/src/views/components/element/TableElement/EditableTable.vue b/src/views/components/element/TableElement/EditableTable.vue
index edc72d6b..3ca0e746 100644
--- a/src/views/components/element/TableElement/EditableTable.vue
+++ b/src/views/components/element/TableElement/EditableTable.vue
@@ -72,14 +72,13 @@
 import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import debounce from 'lodash/debounce'
 import tinycolor from 'tinycolor2'
+import { useStore } from '@/store'
 import { PPTElementOutline, TableCell, TableCellStyle, TableTheme } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import { KEYS } from '@/configs/hotkey'
 import { createRandomCode } from '@/utils/common'
 
 import CustomTextarea from './CustomTextarea.vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
 
 export default defineComponent({
   name: 'editable-table',
@@ -112,7 +111,7 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
 
     const subThemeColor = ref(['', ''])
diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue
index 4b569083..ed1721c4 100644
--- a/src/views/components/element/TableElement/index.vue
+++ b/src/views/components/element/TableElement/index.vue
@@ -41,8 +41,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { PPTTableElement, TableCell } from '@/types/slides'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
@@ -69,7 +68,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
 
     const { addHistorySnapshot } = useHistorySnapshot()
diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue
index 0ffc2189..8fdb806f 100644
--- a/src/views/components/element/TextElement/index.vue
+++ b/src/views/components/element/TextElement/index.vue
@@ -39,8 +39,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import debounce from 'lodash/debounce'
-import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { MutationTypes, useStore } from '@/store'
 import { EditorView } from 'prosemirror-view'
 import { toggleMark, wrapIn, selectAll } from 'prosemirror-commands'
 import { PPTTextElement } from '@/types/slides'
@@ -79,7 +78,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const store = useStore<State>()
+    const store = useStore()
     const { addHistorySnapshot } = useHistorySnapshot()
 
     const elementRef = ref<HTMLElement>()