您现在的位置是:首页 >技术交流 >vue3之vite创建H5项目之3 (Pinia 状态管理的使用与持久化、后端开启一个服务与axios请求数据、proxy代理、axios封装 )网站首页技术交流
vue3之vite创建H5项目之3 (Pinia 状态管理的使用与持久化、后端开启一个服务与axios请求数据、proxy代理、axios封装 )
简介vue3之vite创建H5项目之3 (Pinia 状态管理的使用与持久化、后端开启一个服务与axios请求数据、proxy代理、axios封装 )
目录
vue3之vite创建H5项目之3 ( )
1:Pinia 状态管理
- 安装依赖
pnpm i pinia-plugin-persistedstate pnpm i pinia
1-1 之 store / index.ts
- 使用了数据持久化
pinia-plugin-persistedstate
// src/store/index.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const store = createPinia()
store.use(piniaPluginPersistedstate)
export default store;
1-2 之 main.ts引入
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 引入 pinia
import store from "./stores/index"
const app = createApp(App)
app.use(store)
1-3 之 stores / user.ts
//src/store/user.ts
import { defineStore } from 'pinia'
import { useAppStore } from './app'
export const useUserStore = defineStore({
id: 'user',
state: () => {
return {
name: '小小亮',
age: 18
}
},
getters: {
fullName: (state) => {
return state.name + '叼'
}
},
actions: {
// 简单修改一个字段
updateName(data: any) {
this.name = data
},
// 修改整个state
updateStateObj(data: any) {
this.$state = data
// this.updateAppConfig()
},
// 修改age和app配置
updateAppAndAge(data: any) {
this.age = data
this.updateAppConfig()
},
updateAppConfig() {
const appStore = useAppStore()
appStore.setData('app-update')
}
},
// 开启数据缓存
persist: {
key: 'user',
storage: sessionStorage, // 数据存储位置,默认为 localStorage
// paths: ['name'], // 用于部分持久化状态的点表示法路径数组,表示不会持久化任何状态(默认为并保留整个状态)
// overwrite: true
}
})
1-4 之 stores / app.ts
import { defineStore } from 'pinia'
export const useAppStore = defineStore({
id: 'app',
state: () => {
return {
config: 'app配置'
}
},
actions: {
setData(data: any) {
console.log('setData-app',data)
this.config = data
}
}
})
1-5 调用pinia的方法
<template>
<div>
PinaIndex
<div>
获取name- {{ name }} <br/>
获取age- {{ age }}<br/>
获取fullName-计算属性- {{ userStore.fullName }}<br/>
获取app的config: {{ appStore.config }}
</div>
<div @click="changeName">
修改name
</div>
<div @click="changeStateObj">
修改State对象
</div>
<div @click="changeAppAndAge">
修改Age和app配置
</div>
<div @click="goBack">返回</div>
</div>
</template>
<script setup lang="ts" name='PinaIndex'>
import { computed } from 'vue'
import { useRouter } from "vue-router"
const router = useRouter()
import { useUserStore } from '@/stores/user';
import { useAppStore } from '@/stores/app';
const userStore = useUserStore()
const appStore = useAppStore()
const name = computed(()=>{
return userStore.name
})
const age = computed(()=>{
return userStore.age
})
const changeName = ()=> {
userStore.updateName('xxxx')
}
const changeStateObj = ()=> {
const { name, age } = userStore.$state
userStore.updateStateObj({
name: name + 1,
age: age + 1
})
}
const changeAppAndAge =()=> {
const { age } = userStore.$state
userStore.updateAppAndAge(age+1)
}
const goBack = ()=>{
router.push("/")
}
</script>
<style lang="scss" scoped>
</style>
3:后端开启一个服务与axios请求数据
3-1 ts-node 文件 后端服务
3-1-1 安装
yarn add ts-node -g
npm init -y
yarn add @types/node -D
yarn add express -S
yarn add @types/express -D
yarn add @types/express -D
yarn add typescript -g
3-1-2 服务的 index.ts
import express,{Express,Router,Request,Response} from "express"
import axios from "axios"
const cors = require('cors')
const app:Express = express()
const router:Router = express.Router() // 分模块
// 允许所有跨域请求
app.use(cors())
app.use("/api",router) //
app.get('/list', (req, res) => {
res.set('Content-Type', 'text/plain')
res.send({
code:'200',
data:{
msg:'msg'
}
})
})
app.listen(8989,()=>{
console.log("success server http://localhost:8989");
})
3-2 前端使用axios返回接口
import axios from "axios"
onMounted(async ()=>{
let {data} = await axios.get('http://localhost:8989/list')
console.log('data',data); // {"code": "200", "data": {"msg": "msg"}}
})
4 proxy代理 vite.config.ts
export default ({ command }: ConfigEnv): UserConfigExport =>{
return {
// 开发环境的 相关配置
server: {
// 服务配置
host: '0.0.0.0',
// port: 5006, // 类型: number 指定服务器端口;
// open: false, // 类型: boolean | string在服务器启动时自动在浏览器中打开应用程序;
proxy:{
'/api': {
target: 'http://XXXX', // 代理的后端接口路径
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, '')
},
// 使用 proxy 实例
// "/api": {
// target: "http://XXX",
// changeOrigin: true,
// configure: (proxy, options) => {
// // proxy 是 'http-proxy' 的实例
// },
// },
}
},
}
}
4:封装axios
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。