小程序-uniapp：uni-app-base 项目基础配置及使用，开箱可用（二）

// 扩展useStore声明
import { StateType } from '@/store/index.d'
import { InjectionKey } from 'vue'
import { Store } from 'vuex'
declare module "vue" {
  type Hooks = App.AppInstance & Page.PageInstance;
  interface ComponentCustomOptions extends Hooks {
    // 这里扩展this.$store，还可以在这里对this添加其他的声明
    $store: Store<StateType>
  }
}
declare module 'vuex' {
  export function useStore<S = StateType>(injectKey?: InjectionKey<Store<S>> | string): Store<S>
}

import { createStore } from 'vuex'
import { StateType } from './index.d'
// 批量引入其他module，
const files = import.meta.globEager('./modules/*.ts') // vite的写法
const keys = Object.keys(files)
const modules: any = {}
keys.forEach((key) => {
    if (Object.prototype.hasOwnProperty.call(files, key)) {
        // 提取文件的名字作为模块名
        modules[key.replace(/(\.\/modules\/|\.ts)/g, '')] = files[key].default
    }
})
/** 全局的state,这个看自己的需求，如果有用到就在createStore中添加 */
export interface rootStateType {}
export default createStore<StateType>({
    modules
})

import { rootStateType } from './index'
import { systemStateType } from './modules/system'
export interface StateType extends rootStateType {
    system: systemStateType
}

import { Module } from 'vuex'
import { rootStateType } from '@/store'
export interface systemStateType {
    title: string
}
const systemModule: Module<systemStateType, rootStateType> = {
    namespaced: true,
    state: () => ({
        title: '你好，我是snow'
    })
}
export default systemModule

import { createSSRApp } from "vue";
import App from "./App.vue";
import store from './store'
import '../mock'
export function createApp() {
  const app = createSSRApp(App).use(store);
  return {
    app,
  };
}

<view>{{ title }}</view>
import { useStore } from 'vuex'
const store = useStore()
const title = ref(store.state.system.title)

$bg-color: #f5f5f5;

css: {
    // css预处理器
    preprocessorOptions: {
        scss: {
            // 因为uni.scss可以全局使用，这里根据自己的需求调整
            additionalData: '@import "./src/styles/global.scss";'
        }
    }
  },

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页", // title
        "navigationBarTextStyle": "white", // 导航栏标题颜色 black、white两种颜色
        "navigationBarBackgroundColor": "#FF0000"， // 导航栏背景色
        "enablePullDownRefresh": "false" ,// 是否开启下拉刷新
        "backgroundColor": "#F8F8F8", // 窗口的背景色
        "navigationStyle":"default" , // 导航栏样式，仅支持 default/customm,开启 custom 后，所有窗口均无导航栏
        "usingComponents": { // 引用小程序组件
            "my-component": "/path/to/my-component"
        }
  }
},

onLoad() {
  uni.setNavigationBarTitle({
    title:'个人中心'
  })
}