Vue3-公共数据配置&&插件配置&&网络配置&&路由配置&&数据仓库配置pinia

---

公共数据配置

因为v2使用公共配置时一般绑定在原型上无论是否使用都在每一个组件的this链上,这样的设计不太友好,v3提供了专门公共数据配置的方式: globalProperties getCurrentInstance

globalProperties：添加可以在应用程序内的任何组件实例中访问的全局 property。属性名冲突时，组件的 property 将具有优先权。
getCurrentInstance：返回当前组件的实例对象，也就是当前vue这个实例对象

//再main.js中
const app=createApp(App)
app.config.globalProperties.$common=公共数据
//组件中钩子中:
//getCurrentInstance()获取当前组件实例对象
//当前组件的实例对象解构的proxy对象中就有$common
//注意点是这个函数要在组件钩子中使用,不要在普通函数中使用

<script setup>
 import { getCurrentInstance } from "vue";
 const {proxy}= getCurrentInstance()  //解构组件的实例对象的proxy对象,里面就有$common
 let common=proxy.$common  //接受公共数据
 </script>

网络配置

下载axios模块

npm i axios

代理配置

//vite环境:
export default defineConfig({
	plugins: [vue()],
	server: {
		// port:"8080",
		// host
		proxy: {
			'/api': {
				target: 'http://127.0.0.1:7001', // 代理的目标地址
				rewrite: (path) => path.replace(/^\/api/, '/'), // 路径重写
				changeOrigin: true,
				// secure: true, // target是否https接口
				// ws: true, // target是否代理websockets               
			}
		}
	}
})

网络配置:

//mian.js
import axios from "axios"
const app=createApp(App)
axios.defaults.baseURL="http://127.0.0.1:5173/api"  //访问的是
app.config.globalProperties.$axios=axios
app.mount('#app')   //注意的上面创建了app对象，所以这里必须用app去挂载，否则会造成axios没有挂载上去

//组件中使用axios
<script setup>
 import {getCurrentInstance,onBeforeMount} from 'vue'
 const { proxy } = getCurrentInstance();
 onBeforeMount(async ()=>{
    let data=await proxy.$axios('/serve')  //挂载之前我们去做axios请求
    console.log(data)
 })
 </script>

插件配置

同2.0一样use函数接受一个函数或者对象(对象有install函数) 然后会调用这个传入的回调函数 给它传参app对象,以此来实现第三方插件

以axios为例：

//main.js文件
import { createApp } from 'vue'
import App from './App.vue'
import $axios from "./http/$axios.js"
import router from './router/router.js'
createApp(App).use(router).use($axios).mount('#app')

//外部专门放插件的js文件中
import axios from "axios"
function $axios(app){
	axios.defaults.baseURL="http://127.0.0.1:5173/api"
	app.config.globalProperties.$axios=axios
}
export default $axios;

使用方法同上，这样写的好处利于我们对插件的统一管理和维护

路由配置

跟Vue2差不多

//路由文件
import {
createRouter,
createWebHistory
} from "vue-router"

const routes = [{
path: "/home",
name: 'home',
component: () => import("../views/home/home.vue"),
children:[{
path:'/home/box1',
name:'box1',
component:() => import("../views/home/views/Box1.vue"),
}]
},
{
path: "/login",
name: 'login',
component: () => import("../views/login/login.vue")
},
{
path: "/index",
name: 'index',
component: () => import("../views/vue3.0-hook-toRef-toRefs-isRef-readonly/index.vue")
},
{
path: "/box1",
name: 'box1',
component: () => import("../views/vue3.0-公共属性配置/box1.vue")
}
]
const router = createRouter({
history:createWebHistory(), 
routes
})
//全局守卫
router.beforeEach((to,from,next)=>{   //调用beforeEach钩子函数限制条件访问页面
    if(to.path=="/login"||to.path=="/home"){
        next()
    }else{
        let flag = window.localStorage.getItem("email");
        if(flag){
            next()
        }else{
           next("/login")
        }
    }
})

export default router

//main.js文件
import router from "./router/index.js"
app.use(router)//记得在mount之前调用

组件内部使用
<script setup>
  import { onBeforeMount } from 'vue'
  import { useRouter, onBeforeRouteLeave, useRoute } from 'vue-router'
  let router = useRouter()
  let route = useRoute()
  //组件内的守卫钩子
  onBeforeRouteLeave((to, from, next) => {
    console.log(66666, "离开")
    next()
  })
  let fn = () => {
    console.log(route.query)
    window.localStorage.setItem("email", 1)
    alert("登录成功")
    router.push({ path: '/home', query: { name: "ljy", age: 22 } })
  }
</script>
<template>
  <h1>login</h1>
  <button @click="fn">点击登录</button>
</template>

数据仓库配置

vuex
vuex3.0适用于vue2.0
vuex4.0适用于vue3.0和2.0
这里主要介绍一款超前的数据仓库Pinia

Pinia从使用角度和之前的Vuex一样。
Store是保存状态与业务逻辑的实体，有三个核心概念。

• state：存储全局状态
• getters：类似于组件的computed，根据已有state封装派生数据，也具有缓存的特性
• actions：类似于组件的methods,用来封装业务逻辑，支持同步和异步

Pinia 适用于3.0 为了兼容2.0也能使用 主要是给3.0的组合式API设计的

1.安装

npm install pinia

2.写一个store文件

使用defineStore定义容器
参数1：是对仓库的命名，名称必须具备唯一性；
参数2：配置的选项对象，即state、getters、actions，其中state的写法必须是函数，为了避免在服务端交叉请求导致的状态数据污染，而且必须是箭头函数，为了更好的TS类型推导。

//  store/index.js文件
import { defineStore } from 'pinia'
//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const useStore = defineStore('storeId', {
  // 这里易错语法:如果箭头函数直接指向返回值  记得把返回的对象用小括号括起来
  state: () => {
    return {
      name: 'ljy',
      count:0
    }
  }
})

//main.js文件
import { createPinia } from 'pinia'
let app=createApp(App)
app.use(createPinia())

3.组件中的使用

<script setup>
	import {useStore} from "../store/index.js"  //引入仓库
	let store=useStore()  
	console.log(store,msg,111)	
</script>

4.修改数据

//修改仓库状态1:
<script setup>
	import useStore from "../../store/index.js"
	let store=useStore()
    let fm=()=>{store.name="修改成功"}//store是一个响应性对象 因此可以修改并刷新
	let {name}=store
	let fn=()=>{ name="修改失败"} //解构之后修改是不行的,因为解构后name为非响应式变量 
    
    //解决方案:利用toRefs把响应式对象的属性解构为响应性的变量
    import {toRefs} from "vue"
    import useStore from "../../store/index.js"
	let store=useStore()
	let {name}=toRefs(store)
	let fn=()=>{msg.value="修改成功"}   //一定不要忘了value
</script>

//修改仓库状态2:
store.$reset()//将状态 重置 到其初始值

//修改仓库状态3:
store.$patch({
  name:"修改成功",
  count:store.count++,
})
store.$patch((state)=>{
    state.name="666修改成功";
    state.count++,
})

//$patch整体修改个单条修改的区别?
store.name="修改成功"
store.count++
//状态刷新一次,可以批量修改

5.订阅修改

//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次
store.$subscribe((mutation, state) => { 
  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem('test', JSON.stringify(state))
})

案例：

//store仓库文件中
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
name: 'ljy',
count:22,
shuju:JSON.parse(window.localStorage.getItem('test')),  //读取缓存中的数据
}
}
})


//组件中
<script setup>
 import {reactive} from 'vue'
 import { useStore } from "../../store/index.js"
 let store= useStore()
 let shuju= reactive({})
 let fn=()=>{
  store.$patch((state)=>{
      state.count++
      state.name="ljy666"
  })
 }
 store.$subscribe((mutation, state) => {
   window.localStorage.setItem('test', JSON.stringify({name:store.name, count:store.count}))  //设置缓存，保存上一次最后修改的值
   shuju.name= store.shuju.name
   shuju.count = store.shuju.count
  })
</script>
<template>
<button @click="fn">点击修改仓库</button>
<h1>{{store.name}}---{{store.count}}</h1>
<h2>每次更新的数据： <span v-for="(item, index) in shuju" :key="index">{{item}}</span></h2>
</template>

6.Getter

Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用：(ps:虽然鼓励但是依然提供了非es6玩家的使用方式 内部可以用this代表state)

//store仓库
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
name: 'ljy',
count:22,
shuju:JSON.parse(window.localStorage.getItem('test')),
}},
getters: {
Count: (state) => state.count * 2,
},
})

//组件中直接使用:<h1>{{store.Count}}</h1>

7.Actions
在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)
之所以提供这个功能 就是为了项目中的公共修改状态的业务统一
注：定义actions时不要使用箭头函数，因为箭头函数绑定外部this。使用容器中的state 时，action通过this操作。

8.模块化
一个文件一个小仓库,仓库之间可以相互访问数据 不同组件也可以访问任意小仓库数据

//store/car.js文件
export const car = defineStore('car', {
  state: () => ({
    counter: 0,
  }),
  actions: {
   
  }
})

//store/userinfo.js文件
export const userinfo = defineStore('userinfo', {
  state: () => ({
    counter: 0,
  }),
  actions: {
     fn(state){state.counter=100}
  }
})


//A组件可以用car,userinfo两个仓库的数据
import {car} from "@/store/car.js"
import {userinfo} from "@/store/userinfo.js"
let store1=car()
store1.counter
let store2=userinfo()
store2.counter

//car仓库使用userinfo仓库跟组件一样的使用方式
import {userinfo} from "@/store/userinfo.js"
let store2=userinfo()
store2.counter
store2.fn()