vuex优化

2025-04-15 02:20:00 +08:00 · 2021-01-29 10:32:32 +08:00 · 2021-01-29 10:32:32 +08:00 · 29db40288e
commit 29db40288e
parent c0d6f71c9c
78 changed files with 207 additions and 271 deletions
--- 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",
--- 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>
--- 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(() => {
--- 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,
 }
--- 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)
--- 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)
--- 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)

--- 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)

--- 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)

--- 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)
--- 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)

--- 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)

--- 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()
--- 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()
--- 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: '+' | '-') => {
--- 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()
--- 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 = () => {
--- 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)
--- 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')
--- 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'

--- 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) {
--- 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)
--- 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'
--- a/src/store/state.ts
+++ 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: '',
+}
--- 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) => {
--- 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')
--- 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(() => {
--- 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)

--- 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)

--- 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)
--- 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)
--- 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(() => {
--- 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)))
--- 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)
--- 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)
--- 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)
--- 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)
--- 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)

--- 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)

--- 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()
--- 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()
--- 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)

--- 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({
--- 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()
--- 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)
--- 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)
--- 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 = () => {
--- 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)
--- 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)
--- 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()
--- 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)

--- 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)
--- 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)
--- 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)
--- 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)
--- 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()
--- 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>()
--- 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({
--- 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>()
--- 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(() => {
--- 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)
--- 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)

--- 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)
--- 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>()
--- 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>()
--- 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>()
--- 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 = [
--- 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)
--- 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)
--- 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)

--- 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)

--- 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)
--- 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(() => {
--- 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({
--- 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)

--- 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(['', ''])
--- 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()
--- 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>()