这是我参与「掘金日新计划 · 8 月更文挑战」的第6天,点击查看活动详情
建议按序观看
当前目录结构
├── README.md
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.ts
│ ├── router // 路由目录
│ │ ├── beforeHooks.ts
│ │ └── index.ts
│ ├── store // ++ Pinia
│ │ ├── index.ts
│ │ └── modules
│ │ └── user.ts
│ ├── style.css
│ ├── views
│ │ ├── About.vue
│ │ └── Home.vue
│ └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
Pinia 的引入
与上篇文章关于 vue-router的部分使用中说明的一样,通过可以有更多的插件加入的思维去设计引入,这里的 Pinia 页使用这种方式去构建
pnpm add pinia-plugin-persist
import { createPinia } from "pinia";
// 数据持久化插件
import piniaPersist from 'pinia-plugin-persist'
import type { App } from "vue";
// 创建 pinia 实例
const store = createPinia();
// 使用插件
store.use(piniaPersist)
// 安装
export function setupStore(app: App<Element>) {
app.use(store);
}
export { store };
引入在 main 中,即可使用
import { setupPiniaStore } from '@/store'
// 挂载pinia状态管理
setupPiniaStore(app)
在modules文件中,我们可以放很多实例,这里不难看出 Pinia是什么呢,这里不详细的说明 Pinia的使用方案,直接上代码。
举一个例子: modules/user.ts
import { defineStore } from "pinia";
import { store } from "@/store";
interface IUserState {
username: string | null;
}
export const useUserStore = defineStore({
id: "user",
state: (): IUserState => ({
username: null,
}),
getters: {
getUsername(): string | null {
return this.username;
},
},
// 数据持久化配置
persist: {
enabled: true, // 开启存储
// strategies: 指定存储位置以及存储的变量
// 该属性可以不写,不写的话默认是存储到sessionStorage里边
// 默认存储state里边的所有数据
strategies:[
{ storage: localStorage, paths: ['username' ]}
// storage 存储到哪里 sessionStorage/localStorage
// paths是数组,要存储缓存的变量,也可以写多个变量
// paths如果不写,那么默认存储就是state里边的所有数据
]
},
actions: {
SET_USERNAME(payload: string) {
this.username = payload;
},
// 初始化state
clear() {
this.$reset()
}
}
});
// 在组件setup函数外使用
export function useUserStoreWithOut() {
return useUserStore(store);
}
页面中的使用
<template>
{{ users.username }}
</template>
<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
// 实例化使用userStore
const users = useUserStore();
// 存储数据
users.SET_USERNAME("user");
</script>
环境配置
新增一些环境变量的配置,可以方便与代码在不同变量中发布信息
touch .env.development
VITE_NODE_ENV=development #环境配置
VITE_BASE_URL='' #基础路径
VITE_VUE_APP_FETCH_BASE_URL='/' #请求路径
VITE_VUE_APP_CDN_BASE_URL='' #cdn 路径
相对来说,你也可以配置出
.env.development // 开发环境
.env.test // 测试环境
.env.production // 生产环境
还记得 vue-cil 中是如何调用 VITE_NODE_ENV的吗
console.log(process.env.NODE_ENV); // 调用配置 ❌ ✅
但是这里你会发现无法调用,因为方式改变了
console.log(import.meta.env.VITE_NODE_ENV); // 调用配置 ✅
修改指令
"scripts": {
"dev": "vite", // 启动项目
"build": "vue-tsc --noEmit && vite build", // 打包
"preview": "vite preview" // 预览
}
这时候为了切换环境变量可以修改为
"dev:test": "vite --mode test" // 启动项目即可、确定为 test 环境