欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3搭配pinia的踩坑實(shí)戰(zhàn)記錄

 更新時(shí)間:2022年04月11日 10:32:28   作者:bluesGavin  
Pinia是一個(gè)同時(shí)支持Vue2和Vue3的應(yīng)用狀態(tài)管理工具,簡(jiǎn)單來說就是為了管理整個(gè)應(yīng)用中的響應(yīng)式數(shù)據(jù),解決各個(gè)組件交互時(shí)數(shù)據(jù)狀態(tài)的不好管理的問題,下面這篇文章主要給大家介紹了關(guān)于vue3搭配pinia踩坑的相關(guān)資料,需要的朋友可以參考下

前言

最近接手了一個(gè)新項(xiàng)目,用的是VUE3+pinia的組合。由于之前沒有用過這2個(gè)庫,只能現(xiàn)學(xué)現(xiàn)做。幸運(yùn)的是這兩者的上手難度都不大,項(xiàng)目可以正常開發(fā)。但這其中也遇到了一些坑,今天就來講其中我印象最深的一個(gè)。

An Object could not be cloned?

不知道有多少開發(fā)者遇到過這個(gè)報(bào)錯(cuò)——An Object could not be cloned

本人這里是一個(gè)electron項(xiàng)目,在使用ipcRenderer.invoke通訊時(shí)傳入了一個(gè)對(duì)象,就拋出了這個(gè)錯(cuò)了。把傳入的對(duì)象打印出來,發(fā)現(xiàn)對(duì)象里有字段被轉(zhuǎn)成了proxy對(duì)象,估計(jì)就是在ipcRenderer.invoke處理proxy的時(shí)候無法處理,因此報(bào)錯(cuò)。

VUE 3的toRaw

我們都知道VUE 3 相比VUE 2在響應(yīng)式數(shù)據(jù)的處理上有著巨大的改動(dòng),從2的Object.defineProperty到3的proxy。而為了讓用戶可以自行選擇是否使用響應(yīng)式,VUE 3提供了 reactive,ref等API。在把數(shù)據(jù)轉(zhuǎn)成響應(yīng)式之后,數(shù)據(jù)就已經(jīng)被VUE修改成一個(gè)新的對(duì)象了,通過打印我們可以看到。

const obj = reactive({ a: 1, b: 2 });
console.log(obj);

當(dāng)然為了避免上述我遇到的這類問題,VUE 3提供了一個(gè)API讓用戶可以把proxy對(duì)象轉(zhuǎn)回原生的對(duì)象。這個(gè)API就是toRaw()。

const obj = reactive({ a: 1, b: 2 });
console.log(obj);
console.log(toRaw(obj));

有了toRaw之后,理應(yīng)不會(huì)遇到什么問題了??墒窃谖业膱?chǎng)景里又有一個(gè)情況,就是混用了PINIA。

PINIA與VUE 3可以混合搭配?

PINIA是公認(rèn)下一代的“VUEX”,同樣有著與VUEX一樣的特性——與VUE搭配使用會(huì)更加流程。但要注意的一點(diǎn)是,PINIA并不是VUE的專屬,也就是說無論你開發(fā)的是什么項(xiàng)目,只要用到JavaScript你就可以用PINIA。也正因此如此,似乎與前面提到的一點(diǎn)是沖突的,這也出現(xiàn)在了我的項(xiàng)目中。

我們先來寫一個(gè)簡(jiǎn)單的PINIA store

// store.js
export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      myData: {
        o1: {
          b: 2
        },
        a: 1
      }
    }
  },
  actions: {
    setMyData(data) {
      this.myData = { ...data };
    },
  },
})

然后在VUE中使用

import { useCounterStore } from "./stores/index.js";
const counter = useCounterStore();
const obj = reactive({ a: 1, b: 2 });

console.log(counter.myData);
counter.setMyData({newO:obj});
console.log(counter.myData);

打印出來的結(jié)果如下:

我們發(fā)現(xiàn)這個(gè)myData對(duì)象是一個(gè)proxy嵌套proxy的對(duì)象。當(dāng)我們想要讓他轉(zhuǎn)成原生對(duì)象時(shí),在VUE 3項(xiàng)目中很自然會(huì)想到用toRaw。

console.log('toRaw',toRaw(counter.myData))

可是打印出來的結(jié)果是沒有把里面的proxy解開的。

正因?yàn)檫@樣所以我得到了本文最開始提到的報(bào)錯(cuò)信息。

同樣的操作在VUE 3下的結(jié)果

遇到這樣的問題,我第一時(shí)間懷疑是不是因?yàn)槲以谟玫?setMyData中用到了解構(gòu)語法。那如果同樣的寫法在VUE3 可行嗎?我們?cè)賮碓囈幌拢?/p>

const obj = reactive({ a: 1, b: 2 });
const obj2 = reactive({c:3,d:4});

obj2.d = {...obj};
console.log(obj2);

我們可以看到在VUE3中解構(gòu)寫法的賦值,并不會(huì)出現(xiàn)proxy嵌套的情況。說明VUE3在對(duì)自己的響應(yīng)式數(shù)據(jù)賦值的時(shí)候是做了專門的處理的。因此我們可以得到一個(gè)簡(jiǎn)單的結(jié)論:PINIA與VUE3的搭配雖然在使用上可以很自然順暢,但他們并不是天生一對(duì)的。PINIA在數(shù)據(jù)賦值的時(shí)候沒有像VUE 3一樣有針對(duì)VUE 3響應(yīng)式數(shù)據(jù)的處理,同時(shí)VUE 3的toRaw也沒有辦法為PINIA的數(shù)據(jù)完美的還原。

最后的解決方式

說完了問題的原因,簡(jiǎn)單來提一下本文錯(cuò)誤的解決方案。其實(shí)說到底我們的目標(biāo)就是要得到一個(gè)“干凈”的對(duì)象。我最后用是JSON.stringify()解決的,也說明了JSON.stringify的處理是可以解決proxy嵌套的。

console.log(counter.myData);
console.log(JSON.stringify(counter.myData));

當(dāng)然我的同事用lodash的omit方法也可以解決,只是我覺得JSON.stringify會(huì)更加的“原生”。關(guān)于lodash的omit更多信息可以看:www.lodashjs.com/docs/lodash…

總結(jié)

相信并不是很多人會(huì)遇到我的這種情況,我也知道手上的項(xiàng)目代碼中有很多可以優(yōu)化的地方(我是中途加入這個(gè)項(xiàng)目的)。但本文想要分享的是在VUE 3搭配PINIA做項(xiàng)目開發(fā)的時(shí)候,有可能會(huì)遇到的問題。以及表明他們兩并不是“天生一對(duì)”的,當(dāng)然對(duì)于這個(gè)問題不知道后續(xù)會(huì)不會(huì)被優(yōu)化。我個(gè)人是覺得如果把他們看作是兩個(gè)獨(dú)立的工具,其實(shí)這個(gè)并不是BUG,更多的是開發(fā)者的“一廂情愿”。

最后,希望本文可以幫助到一些開發(fā)者,在開發(fā)過程中避免掉坑。

到此這篇關(guān)于vue3搭配pinia踩坑的文章就介紹到這了,更多相關(guān)vue3 pinia踩坑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決

    vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決

    這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue實(shí)現(xiàn)兩種路由權(quán)限控制方式

    Vue實(shí)現(xiàn)兩種路由權(quán)限控制方式

    路由權(quán)限控制常用于后臺(tái)管理系統(tǒng)中,對(duì)不同業(yè)務(wù)人員能夠訪問的頁面進(jìn)行一個(gè)權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制,具有一定的參考價(jià)值,感興趣的可以了解一下
    2021-10-10
  • vue3中Fragment特性的一個(gè)bug需要注意事項(xiàng)

    vue3中Fragment特性的一個(gè)bug需要注意事項(xiàng)

    這篇文章主要介紹了vue3中Fragment特性的一個(gè)bug,需要留意的注意事項(xiàng)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2024-01-01
  • vue3中使用Apache?ECharts的詳細(xì)方法

    vue3中使用Apache?ECharts的詳細(xì)方法

    最近在做一些數(shù)據(jù)透析的項(xiàng)目需要用到報(bào)表圖,那么報(bào)表圖好用的有老牌的ECharts,比較新意的AntV,思前馬后的想了一下還是用了Echarts,這篇文章主要介紹了vue3中使用Apache?ECharts,需要的朋友可以參考下
    2022-11-11
  • vue實(shí)現(xiàn)移動(dòng)端多格輸入框

    vue實(shí)現(xiàn)移動(dòng)端多格輸入框

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端多格輸入框,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例

    Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例

    這篇文章主要給大家介紹了Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式

    antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式

    這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例

    vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例

    圖形驗(yàn)證碼是做網(wǎng)站常用的功能,本文主要介紹了vue+springboot實(shí)現(xiàn)圖形驗(yàn)證碼Kaptcha的示例,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-11-11
  • 淺談vue的第一個(gè)commit分析

    淺談vue的第一個(gè)commit分析

    這篇文章主要介紹了淺談vue的第一個(gè)commit分析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • Vue.js中的computed功能設(shè)計(jì)

    Vue.js中的computed功能設(shè)計(jì)

    computed作為計(jì)算屬性其作用是描述響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯計(jì)算,當(dāng)所依賴的響應(yīng)式數(shù)據(jù)發(fā)生改變時(shí)計(jì)算屬性會(huì)重新計(jì)算,更新邏輯計(jì)算的結(jié)果,這篇文章主要介紹了Vue.js中的computed的功能設(shè)計(jì),需要的朋友可以參考下
    2023-06-06

最新評(píng)論