项目集成 vue-router 和 vuex

Posted 2021-08-28 忘忘碎斌bin

项目集成 vue-router 和 vuex

在项目内为了方便管理项目和帮助开发，需要有一个清晰的目录结构，对集成的库，需要进行相应的抽取，封装…

注：在写对应的文件时，省略了其他库的与演示内容不相关的代码，为的是代码片段简洁点儿。

Vue-router的集成

安装：npm install vue-router@next

配置映射关系

• 新建src/router/index.ts文件

import { createRouter, createWebHashHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router";
const routes: RouteRecordRaw[] = [
  // 设置映射关系
];

const router = createRouter({
  routes,
  history: createWebHashHistory()
});

export default router;

发现：声明文件内没有export等模块的关键字，那么这个声明文件是全局的，也就是说，只要声明文件内存在，其他地方直接使用即可。若有export导出，那么相应的声明类型，需要导入才能使用。

main.ts内注册

import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";
const app = createApp(App);

app.use(router).mount("#app");

Vuex的集成

安装：npm install vuex@next

配置

• 新建src/store/index.ts文件，以后有关vuex的代码文件，写在store文件夹下

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {};
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
});

export default store;

main.ts内注册

import { createApp } from "vue";
import App from "./App.vue";

import store from "./store";
const app = createApp(App);

app.use(store).mount("#app");