boomYouth

周一：

1. action异步写法：

<script setup>
import sonCom1 from '@/components/sonCom1.vue'
import sonCom2 from '@/components/sonCom2.vue'
import {useCountStore} from '@/store/counter'
import {useChannelStore} from '@/store/channel'
const counterStore=useCountStore();
const ChannelStore=useChannelStore();
console.log(counterStore);
</script><template>
<div><h3>根组件-{{counterStore.count}}</h3>
<sonCom1></sonCom1>
<sonCom2></sonCom2>
<button @click="ChannelStore.getList">获取频道</button>
<ul><li v-for="item in ChannelStore.channelList" :key="item.id">{{ item.name }}</li>
</ul>
</div></template>
<style scoped></style>

import axios from "axios";
import { defineStore } from "pinia";
import { ref } from "vue";export const useChannelStore=defineStore('channel',()=>
{
//声明数据
const channelList=ref([]);
//声明方法
const getList=async()=>{//支持异步const{data:{data}}=await axios.get('http://geek.itheima.net/v1_0/channels');channelList.value=data.channels;console.log(data.channels);
}
//声明getters相关return{channelList,getList}})

2.storeToRefs

如果将得到的store数据直接解构，会丢失掉响应式，这是由于store里面的对象都是基于reactive的，和props一样，reactive里面的操作监听什么的都是基于对象的，但是如果希望解构的时候依旧保持响应式，可以用storeToRefs方法：对于数据可以解构加上这个，但是对于方法的话可以直接解构：

<script setup>
import sonCom1 from '@/components/sonCom1.vue'
import sonCom2 from '@/components/sonCom2.vue'
import {useCountStore} from '@/store/counter'
import {useChannelStore} from '@/store/channel'
import { storeToRefs } from 'pinia'
const counterStore=useCountStore();
const ChannelStore=useChannelStore();
const {count}=storeToRefs(counterStore)
const {getList}=ChannelStore;
console.log(counterStore);
</script><template>
<div><h3>根组件-{{count}}</h3>
<sonCom1></sonCom1>
<sonCom2></sonCom2>
<button @click="getList">获取频道</button>
<ul><li v-for="item in ChannelStore.channelList" :key="item.id">{{ item.name }}</li>
</ul>
</div></template>
<style scoped></style>

3.pinia持久化插件

如果要装持久化插件，配置安装之后可以在想要用的模块的第三个参数加上将插件persist设置为true，被设置persist为true的那个模块就会将数据存到本地，并且刷新浏览器之后优先从本地获取数据：

可以修改持久化的默认配置，需要在persist里面配置

persist
{key：配置键名
paths：['']单引号包裹的要保留的数据的数组
storage：改成可以用getItems这种方法的存储对象}

4.pnpm包管理器

5.ESLint配合Prettier ：

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = {root: true,extends: ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-prettier/skip-formatting'],parserOptions: {ecmaVersion: 'latest'},rules: {//专注于代码的美观度'prettier/prettier': ['warn',{singleQuote: true, //单引号semi: false, //无分号printWidth: 80, //每行宽度至多80字符trailingComma: 'none', //不加对象数组最后逗号endOfLine: 'auto' //换行符号不限制（win mac不统一）}],//Eslint更加专注规范,如果不符合，报错'vue/multi-word-component-names': ['warn',{ignores: ['index']}],'vue/no-setup-props-destructure': ['off'], //关闭props结构的校验'no-undef': 'error' //未定义变量没有使用警告}
}

6.基于husky的代码：暂停区eslint校验

为了解决上面的问题，这里就出了一个解决方案的步骤：

这样就可以在已经修改过的文件里面检查，而不是检查所有的，这样就可以做到，只检查更新之后的版本，而不会去管历史版本的问题;

7.vue-router4路由

配置基地址

<script setup>
// 获取路由对象 router useRouter
// const router=useRouter();
//获取路由参数
// const route=userRoute();import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const goList = () => {router.push('/list')console.log(router, route)
}
</script><template><div>我是app</div><button @click="$router.push('/home')">首页</button><button @click="goList">列表页</button>
</template><style scoped></style>

8.ElementPlus按需导入

在这个组件里面，不仅可以直接用这里面的组件，并且在components中定义的组件，可以直接用

<script setup>
// 获取路由对象 router useRouter
// const router=useRouter();
//获取路由参数
// const route=userRoute();import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const goList = () => {router.push('/list')console.log(router, route)
}
</script><template><div>我是app</div><el-button @click="$router.push('/home')">首页</el-button><button @click="goList">列表页</button>
</template><style scoped></style>

9.pinia构建仓库和持久化：

在这里，有一个致命错误，如果是这样写会报错，但是这样就不会

会报错
return
{}不会报错
return{}

pinia独立维护,仓库统一导出：：

//pinia独立维护import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(persist)//统一导出
export default pinia
export * from './modules/user'
export * from './modules/counter'

<script setup>
// 获取路由对象 router useRouter
// const router=useRouter();
//获取路由参数
// const route=userRoute();import { useRoute, useRouter } from 'vue-router'
import { useUserStore, useCountStore } from '@/stores/index'
const userStore = useUserStore()
const countStore = useCountStore()const router = useRouter()
const route = useRoute()
const goList = () => {router.push('/list')console.log(router, route)
}
</script><template><div>我是app</div><el-button @click="$router.push('/home')">首页</el-button><button @click="goList">列表页</button><p>{{ userStore.token }}</p><el-button @click="userStore.setToken('dfghjuhfghjhgfghjk')">登录</el-button><el-button @click="userStore.removeToken">退出</el-button><hr />{{ countStore.count }}<el-button @click="countStore.add"></el-button>
</template><style scoped></style>

10.数据交互-请求工具设计

import { useUserStore } from '../stores'
import { ElMessage } from 'element-plus'
import router from '../router'
import axios from 'axios'
const baseURL = 'https://big-event-vue-api-t.itheima.net'
const instance = axios.create({baseURL,timeout: 10000//   headers: { 'X-Custom-Header': 'foobar' }
})
// Add a request interceptor
axios.interceptors.request.use(function (config) {// 携带token// Do something before request is sentconst useStore = useUserStore()if (useStore.token) {config.headers.Authorization = useStore.token}return config},function (error) {// Do something with request errorreturn Promise.reject(error)}
)// Add a response interceptor
axios.interceptors.response.use(function (response) {// Any status code that lie within the range of 2xx cause this function to trigger// Do something with response dataif (resizeBy.data.code === 0) {return response}ElMessage.error(response.data.message || '服务异常')return Promise.reject(response.data)},function (error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// Do something with response error//错误的特殊情况401 权限不足或者token过期=》拦截到登录if (error.response?.status === 401) {router.push('/login')}//错误的默认情况ElMessage.error(error.response.data.message || '服务异常')return Promise.reject(error)}
)export default instance
export { baseURL }

同时附上之前学姐问的sessionStorage和localStorage的区别：

cookie、localStorage和sessionStorage三者的区别_localstorage区别_愚舜的博客-CSDN博客

数据库里面的12，13补测题，六级单词，六级翻译；

周二,周三：

六级单词：

今天刷了一个题目，由于之前没有学过，但是我现在打算用刷题的方式学习，也就是要用到那个就去搜：

终于写完了第一个力扣题；

刷题总结：

rfind，从后面开始找，第一个参数为要找的子串，第二个参数为从哪个下标往前找；

substr：从某个下标开始找，包括改下标，第二个参数为找几个；

六级单词，翻译：

1.路由设计和配置：


import { createRouter, createWebHistory } from 'vue-router'
//创建router实例
// 配置路由模式：
// hash模式  createWebHistory 跳转带#号
// history模式 createWebHashHistory  跳转不带#号
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [// 配置登录和架子{path: '/login',component: () => import('@/views/login/LoginPage.vue') //登录页},{path: '/',component: () => import('@/views/layout/LayoutContainer.vue'),redirect: '/house/manage',children: [{path: '/house/manage',component: () => import('@/views/house/HouseManage.vue')},{path: '/house/channel',component: () => import('@/views/house/HouseChannel.vue') //登录页},{path: '/user/profile',component: () => import('@/views/user/UserProfile.vue') //个人资料页},{path: '/user/password',component: () => import('@/views/user/UserPassWord.vue') //重置密码页},{path: '/user/avatar',component: () => import('@/views/user/UserAvatar.vue') //}]}]
})export default router

2.登陆注册静态结构&&基本切换

利用VeeValidate插件，并且用yup验证架构简化代码；
登陆注册共用一个界面；

3.springboot快速上手：

c/s架构：客户端/服务器

b/s架构：浏览器/服务器

springboot properies配置文件

周四：

写完了数据库作业，概率论作业；

周五，周六：

写概率论作业；

周日：

复习六级单词，搭建项目环境；

总的来说，这周还是太摆烂了，马上考六级了，然后又有普通话，还要期末考试了很多作业也开始陆续检查了，今天项目小的答辩，学姐问了很多基础知识都回答的不是很好，更重要的是项目要终极答辩了，这就需要自己基础更多时间来学习，这一周更重要的是补充专业基础知识，合理安排学业和专业上的计划冲突；最后，想用木心的一句话来激励自己:

我的迷茫和胆怯也一直都在，但我告诉自己，就算是万丈深渊，走下去，也是前程万里。