vue3组合式api基础（常用）
前言：vue3中尽量不要使用‘this’，最好使用组合式api（Composition API），如果使用uni-app的，vue3只支持ios>=10（）,安卓4.4版本（）
1.使用store
import {useStore } from 'vuex'const store = useStore()//我这里仅获取state和mutations//获取state我用的是computedconst jwq = computed( ()=> {//里面user为我的module，不是单独引入的可以不加return store.state.user.token})mit('user/setToken' , res.data.token) //setToken为我mutations中的方法名
2.使用router
import {useRouter } from 'vue-router'const router = useRouter()//使用方法和vue2一致，例如：router.push( {name : 'home' } )
3.创建对象
import {reactive , ref } from "vue";const jwq = reactive({name : 'jwq',age : 24}) const zhn = ref(null)//reactive的取值方式就是jwq.name、jwq.age//ref的取值方式 zhn.value
4.使用全局变量
//例如：在main.js中配置了全局变量$httpimport * as http from './lib/axios.js' //这个http为我的请求配置文件const app=createApp(App)app.config.globalProperties.$http=http//如何在页面使用这个$http呢？使用vue提供的 getCurrentInstanceimport {getCurrentInstance } from "vue";const currentInstance = getCurrentInstance()const {$http } = currentInstance.appContext.config.globalProperties//使用$http.post('/api/sys/login',{loginname: 'admin',password: '123',}).then(({data:res}) => {if(res.code===0){console.log('请求成功')}})
5.单文件组件父子传值 <script setup
<!-- son为子组件 fat为父组件 --><!-- fat.vue --><template><son :navList="navList" @handle="handleClick"></son></template><script setup>const handleClick = (data)=> {console.log(data)}</script><!--son.vue--><template><button @click="btn">点击</button></template>import {defineProps,defineEmits} from 'vue'<script setup>const props=defineProps({navList: {type:Array,default(){return []}},})//获取值使用 props.navListconst emit = defineEmits(['handle']);const btn = () => {emit('handle', 'jwq')}//父组件直接访问子组件的值//暴露数据参数，或者方法defineExpose({navList})//在父组件采用 ref的访问方式如fat.value.navList//如果使用父孙组件传值//父组件import { provide } from "vue";provide('reload', 100)//孙组件import { inject } from "vue"; inject('reload') </script>
6.环境变量使用
.env.development文件下VITE_NAME='development'.env.production文件下VITE_NAME='production'
//使用方法//1.在vue文件中import.meta.env.VITE_NAME//2.在vue.config.js的配置文件中import {defineConfig,loadEnv } from 'vite'loadEnv(mode, process.cwd()).VITE_NAME==='production'
7.异步使用
import {nextTick } from "vue";nextTick(()=>{//要执行的异步代码})
8、ref的使用（vue3和vue2的区别）
//在vue2中你可以使用this.$refs.***获取//但是在vue3的setup中并没有这些东西，他是采用ref的方式获取，而且必须在onMounted中，假设ref为jwqimport {ref, onMounted} from "vue";const jwq = ref( null )onMounted(()=>{console.log(jwq.value);})
9、过滤器的替代（vue3和vue2的区别）
//在vue2中你可以使用过滤器来实现你想要的给你//但是vue3已经去掉了过滤器，那么就要采用替代的方式，比如说时间过滤{{time | stampToTime }} //vue2的方式{{stampToTime(time) }} //vue3的方式//vue3中你可以采用在setup中写方法的方式，实现替代
如果觉得《vue3组合式api基础（常用）》对你有帮助，请点赞、收藏，并留下你的观点哦！
