5 роки тому · 29db40288e
--- 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;
			
 
				-}
			
 
				-
			
 
				-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 const key: InjectionKey<Store<State>> = Symbol()
			
 
				 
			
 
				-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>()