Codes►前端

Vue各插件初始化

Vue 各插件初始化

pinia

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { ref, watch } from 'vue'
import { defineStore } from 'pinia'
import { globalDataInst } from '@/js/global-data'
export const useHomeStore = defineStore('home', () => {
  const filterTree = ref<any[]>([])
  const selectedFilterItems = ref<any[]>([])
  const mapAnchorList = ref<any[]>([])
  watch(
    filterTree,
    () => {
      calcSelectedFilterItems()
    },
    { deep: true },
  )
  function setFilterTree(data: any[]) {
    filterTree.value = data
  }
  function setMapAnchorList(data: any[]) {
    mapAnchorList.value = data
  }
  function calcSelectedFilterItems() {
    let res: any[] = []
    let pointList: any[] = []
    for (let i = 0; i < filterTree.value.length; i++) {
      const item = filterTree.value[i]
      const activeItems = item.children.filter((child: any) => {
        return child.active
      })
      activeItems.forEach((element: any) => {
        const points: any = element.children.map((val: any) => {
          return { ...val, icon: element.icon, name: element.name }
        })
        pointList = pointList.concat(points)
      })
      res = res.concat(activeItems)
    }
    selectedFilterItems.value = res
    if (globalDataInst.mapManager) {
      globalDataInst.mapManager.renderPoints(pointList)
    }
  }
  return { filterTree, setFilterTree, selectedFilterItems, mapAnchorList, setMapAnchorList }
})

vuex

状态管理#VueX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createStore } from 'vuex'
// VueX 数据管理框架
// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: { name: 'dell' },
  // mutation 里面只允许写同步代码，不允许写异步代码
  // commit 和 mutation 做关联
  mutations: {
    change(state, str) {
      state.name = str;
    }
  },
  // dispatch 和 actions 做关联
  actions: {
    // change(store, str) {
    //   setTimeout(() => {
    //     store.commit('change', str)
    //   }, 2000)
    // }
  }
})

Axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import axios, { type AxiosInstance } from 'axios'
import { MainHost } from './constants'
export class BaseRequest {
  private axiosInst: AxiosInstance
  constructor(host: string) {
    this.axiosInst = axios.create({
      baseURL: host,
      withCredentials: true,
      headers: {
        'Content-Type': 'application/json',
      },
      timeout: 15000,
    })
  }
  //ts-ignore
  sendRequest(method: string, path: string, params: any = null, data: any = null): Promise<any> {
    return new Promise((resolve, reject) => {
      this.axiosInst
        .request({ method, url: path, params, data })
        .then((res) => {
          resolve(res.data)
          // let { code } = res.data
          // if (code !== 0) {
          //   toast('出现未知错误')
          // }
        })
        .catch(reject)
    })
  }
}
export const mainRequest = new BaseRequest(MainHost)

mockjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import mock from 'mockjs'
import { MainHost } from '../api/constants'
import { LabelTreeData } from './label-tree-data'
import { MapAnchorList } from './map-anchor-list'
function mockLabelTree() {
  mock.mock(new RegExp(`${MainHost}/label/tree($|\\?.*)`), {
    code: 0,
    data: LabelTreeData,
    message: '成功',
  })
}
function mockMapAnchorList() {
  mock.mock(new RegExp(`${MainHost}/map_anchor/list($|\\?.*)`), {
    code: 0,
    data: MapAnchorList,
    message: '成功',
  })
}
export function mockAllData() {
  mockLabelTree()
  mockMapAnchorList()
}

router

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
  ],
})
export default router