vue3组合式api基础（常用）

vue3组合式api基础（常用）

前言：vue3中尽量不要使用‘this’，最好使用组合式api（Composition API），如果使用uni-app的，vue3只支持ios>=10（2016年）,安卓4.4版本（2013年）

1.使用store

import { useStore } from 'vuex'
const store = useStore()
//我这里仅获取state和mutations
//获取state我用的是computed
const jwq = computed( ()=> { //里面user为我的module，不是单独引入的可以不加
  return store.state.user.token
})
 store.commit('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中配置了全局变量$http
import * as http from './lib/axios.js' //这个http为我的请求配置文件
const app=createApp(App)
app.config.globalProperties.$http=http
//如何在页面使用这个$http呢？使用vue提供的 getCurrentInstance
import { 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.单文件组件父子传值 import {defineProps,defineEmits} from 'vue'

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为jwq
import {
		ref, onMounted
} from "vue";
const jwq = ref( null )
onMounted(()=>{
	console.log(jwq.value);
})