Vue3实践记录：vuex/pinia数据为proxy对象时如何获取值、Vue3组件的全局注册

一、vuex/pinia数据为proxy对象时如何获取值

1、问题背景：使用vue3.0时，因为底层是使用proxy进行代理的，所以当我们打印一些值的时候，是proxy代理之后的是Proxy对象，Proxy对象里边的[[Target]]才是真实的对象。

2、那么我们如何获取到其真正的值呢？

3、第一种获取target值的方式：

//第一种获取target值的方式，通过vue中的响应式对象可使用toRaw()方法获取原始对象
import { toRaw } from '@vue/reactivity'
var list = toRaw(store.state.menuList)

4、第二种获取target值的方式，通过json序列化之后可获取值

JSON.parse(JSON.stringify(store.getters.menuList))

二、Vue3组件的全局注册

1、单个注册：在components文件夹下新建index.js

// component/index.js
// 导入需要注册的组件 HelloWorld.vue
import HelloWorld from "./HelloWorld.vue";
export default function install(app){
    app.component('HelloWorld', HelloWorld)
}

// 在main.js中注册
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import components from '@/components/index' //导入
createApp(App).use(store).use(components).use(router).mount('#app') //注册

2、自动注册全局组件：利用 webpack 的语法 require.context()

// require.context(directory, useSubdirectories, regExp)
// directory:表示检索的目录
// useSubdirectories：表示是否检索子文件夹
// regExp:匹配文件的正则表达式,一般是文件名
// 例如 require.context("@/views/components",false,/.vue$/)
const req = require.context('./', true, /\.vue$/);
const requireAll = context => context.keys().map(context);
export default function install(app) {
　　requireAll(req).forEach(({ default: item }) => {
　　　　app.component(item.name,item)
　　});
}