目錄

1、計算屬性computed，一定要return值

（1）案例，輸入框輸入信息，自動算總價

2、watch偵聽器

3、組件通信

（1）父傳子

（2）子傳父

（3）組件的雙向綁定使用v-model

4、路由

5、vuex store

6、路由導航守衛

7、ref屬性，使用defineExpose暴露子組件中的內容

8、watchEffect:懶執行，當數據變化的時候執行

9、生命周期

10、注入 provide inject

11、項目改造使用組合式api

12、Pinia狀態管理

（1）使用

---

1、計算屬性computed，一定要return值

1.引入computed from 'vue'
2.定義一個方法const doblue = computed(()=>{return count.value*2} )
3.模板插值doblue

（1）案例，輸入框輸入信息，自動算總價

1.input綁定<input v-model="inputValue"><button @click='add'>添加
2.實現響應式數據<script>const inputValue = ref('')//定義一個原數組//原數組const list = reactive([{name:"java",price:18},{name:"vue",price:28},])const add = ()=>{list.push({name:inputValue.value,price:18})}    //定義計算屬性const totalPrice = computed( ()=>{let sum = list.reduce((pre,current)=>pre + current.price,0 )return sum.toFixed(2)})</script>

2、watch偵聽器

1.引入watch from 'vue'
2.寫入要在偵聽的數據在watch中let message = ref('heell')let reverseMsg =ref('')watch(message,()=>{//字符串反轉//先將字符串用split方法轉為數組，使用數組的revers方法，再轉為字符串reverseMsg.value=message.value.split('').reverse().join()},{immediate:true}) //立即監聽

3、組件通信

（1）父傳子

1.父組件中引入子組件import Son from ''
2.script標簽中使用了setup，不需要注冊子組件了直接使用<template><Son><Son>
3.父組件的值傳入子組件定義父組件const tilte = ref('我是父組件')
4.在父組件中使用:屬性名=性值綁定:title = 'title' //第二個title是要傳入的值
5.在子組件中使用方法定義接收的參數
defineProps({title:{type:String,defult:''}})
6.模板插值中使用{{title}}

（2）子傳父

1.子組件綁定一個方法<son @send-message = "sendMessage">
2.使用方法const msg = ref('')const sendMessage =(message)=>{msg.value = message}
3.子組件中觸發方法<button @click="sendMessage">發送消息
4.使用定義方法const emit = defineEmits
4.定義方法const sendMessage = ()=>{emit('send-message','傳遞的參數')}

（3）組件的雙向綁定使用v-model

1.父組件使用子組件的地方綁定<Child v:model:modelValue='user.name' v-model:age='user.age'></Child>
2.綁定的值const user = reactive({name:"jack",age:18})
3.子組件去接收值<button @click='updateDate'>更新數據       
</button>
<script>defineProps({modelValue:{type:String,default:''},age:{type:Number,default:0}})//注冊更新modelvalue值的事件const emit = defineEmits(['update:modelValue'，'update:age//觸發值把修改的值傳過去const updateDate = (>{emit('update:modelValue'，'修改的值')emit('update:age，'20')}</script>

4、路由

1.引入<script>import{useRouter} from 'vue-router'
2.使用const onLogin = ()=>{//要跳轉的位置router.push({path:'/'})}

5、vuex store

1.引入import {useStore} from 'vuex'
2.const store = useStore()

6、路由導航守衛

路由在進行切換的時候，可以做一些攔截的鉤子函數

1.引入import {onBeforeRouteLeave,onBeforeRouteUpdate} from 'vue-router'
2.使用onBeforeRouteLeave((to,from,next)=>{} )

7、ref屬性，使用defineExpose暴露子組件中的內容

1.在父組件中使用子組件的地方定義ref = 'sonRef'
2.在父組件中定義const sonRef = ref(null) //響應式屬性名和ref屬性的名稱必須相同
3. <button @clikck="getSon"></button>
4.使用方法去獲取ref
const getSon = ()>{console.log(sonRef.value)
}
5.需要在子組件中暴露在父組件中使用的屬性和方法<script setup>defineExpose({name:"jack",age:24})</script>

8、watchEffect:懶執行，當數據變化的時候執行

1.引入import watchEffect from
watchEffect(async ()=> {const response = await fetch(url.value)data.value = await responese.json()
})

9、生命周期

1.引入生命周期鉤子函數import {onMounted,onUpdated } from 'vue'
2.掛載mountedonMounted(()=>{})
3.更新onUpdated( ()=>{})

10、注入 provide inject

1.引入import {provide,}
2.使用provide('userProvide',{name:'jack',age:18})
3.在子組件中使用import {inject} from 'vue'
const user =inject('userProvide')

11、項目改造使用組合式api

1.首先在<script setup>
2.取消components注冊
3.使用響應式數據const user = reactive({username:'',pasword:''})const rules = reactive({//原本的規則})
4.methods中的方法const 方法名 = async ()=>{//原本的方法，方法中的this記得刪掉}

12、Pinia狀態管理

1.Pina沒有mutations
2.Actions支持同步和異步
3.沒有模塊的嵌套結構

（1）使用

1.安裝npm i pinia
2.創建stores文件夾,index.tsimport {createPinia} from 'pinia'
3.創建實例const store = createPinia()
4.暴露出去export default store
5.在main.ts中集成引入storeimport store form ''
6.集成app.use(store)
7.在store文件夾中定義一個userimport {defineStore} from 'pinia'export const userStore = defineStore('user',{state:()=>{return{user:{}}},actions:{saveUser(user){this.user = user}},getters:{user:(state) = >state.user}})
8.在需要的頁面引入Impor userStore

總結

以上是生活随笔為你收集整理的vue--组合式Api、Pinia状态管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。