在开源版本的 mar3d-vue-project 项目中如何集成自己的vuex状态管理呢？这里我来介绍两种方式
    方式一：
    这个项目中已经帮我们引入了vuex，可以在每个页面中直接使用，以example为例，下图可以看到页面目录下存在一个widget-store.js 的文件，本文件可以直接编写vuex相关代码
    image.png

    1. interface State extends WidgetState {
    2.   count: number
    3. }
    5. const store: StoreOptions<State> = {
    6.   state: {
    7.     widgets: [],
    8.     openAtStart: [],
    9.     count: 1
    10.   },
    11.   getter: {},
    12.   mutations: {
    13.     updateCount(state) {
    14.       state.count ++
    15.     }
    16.   },
    17.   actions: {}
    18. }

    以上方法虽然方便，但是和项目内部状态使用了同一个命名空间，所以第二种方式，就是创建一个自己单独的vuex命名空间
    方式二：
    在 src/common/store下创建自己的vuex配置，如 my-store.ts

    1. // my-store.ts
    2. import { InjectionKey } from 'vue'
    3. import { createStore, Store } from 'vuex'
    5. // 为 store state 声明类型
    6. export interface State {
    7.   count: number
    8. }
    10. // 定义 injection key
    11. export const key: InjectionKey<Store<State>> = Symbol("my-store")
    13. export const myStore = createStore<State>({
    14.   state: {
    15.     count: 0
    16.   },
    17.   getter: {},
    18.   mutations: {
    19.     updateCount(state) {
    20.       state.count ++
    21.     }
    22.   },
    23.   actions: {}
    24. })

    然后在main.ts中注册

    1. // main.ts
    2. import { myStore, key as myKey /* 取一个别名，防止变量冲突 */ } from "@/common/store/my-store.js"
    4. app.use(myStore, myKey)

    使用时只需要通过自己的命名空间标识 key 来获取store对象就可以了

    1. import { useStore } from 'vuex'
    2. import { key } from './store'
    4. const store = useStore(key)

    以上就是在 mars3d基础项目中使用vuex的简单演示，大家可以根据自己项目的具体需求灵活选择