vite 脚手架使用教程(三)-Pinia的使用&环境配置

2,133 阅读2分钟

这是我参与「掘金日新计划 · 8 月更文挑战」的第6天,点击查看活动详情


vite 脚手架使用教程(一)-新建项目

vite 脚手架使用教程(二)-vue-router使用

建议按序观看

当前目录结构

├── 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 环境