Shulou(Shulou.com)05/31 Report--

The main content of this article is to explain "how to solve the problem of vue3 with pinia". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vue3 with pinia error reporting how to solve it"!

An Object could not be cloned?

I don't know how many developers have encountered this error report-- An Object could not be cloned.

I am here is an electron project, in the use of ipcRenderer.invoke communication passed an object, threw this error. Print out the incoming object and find that some fields in the object have been converted into proxy objects. It is estimated that it cannot be processed when ipcRenderer.invoke is dealing with proxy, so an error is reported.

ToRaw of VUE 3

We all know that VUE 3 has a huge change in responsive data processing compared to VUE 2, from Object.defineProperty in 2 to proxy in 3. In order to allow users to choose whether to use responsive or not, VUE 3 provides API such as reactive,ref. After converting the data into responsive, the data has been modified by VUE into a new object, which we can see by printing.

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

Of course, to avoid the kind of problems I encountered above, VUE 3 provides an API that allows users to convert proxy objects back to their native objects. This API is toRaw ().

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

With toRaw, you should not encounter any problems. But there is another situation in my scene, that is, the mixed use of PINIA.

Can PINIA be mixed with VUE 3?

PINIA is recognized as the next generation of "VUEX" and has the same features as VUEX-it will be more streamlined to be used with VUE. But it is important to note that PINIA is not exclusive to VUE, which means that no matter what project you are developing, you can use PINIA as long as you use JavaScript. Because of this, it seems to be in conflict with the point mentioned earlier, which also appears in my project.

Let's write a simple PINIA store first.

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

And then use it in 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)

The printed results are as follows:

We find that this myData object is an object of proxy nested proxy. When we want to convert him to a native object, it's natural to think of toRaw in the VUE 3 project.

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

But the printed result did not unlock the proxy inside.

Because of this, I got the error message mentioned at the beginning of this article.

The result of the same operation under VUE 3

Faced with such a problem, I immediately wondered if it was because I used deconstruction syntax in using setMyData. Is it possible to write the same way in VUE3? Let's try again:

Const obj = reactive ({a: 1, b: 2}); const obj2 = reactive ({CMV 3 dju 4}); obj2.d = {... obj}; console.log (obj2)

We can see that deconstructing the assignment of writing in VUE3 does not result in proxy nesting. It shows that VUE3 has done special processing when assigning values to its own responsive data. So we can come to a simple conclusion: although the collocation of PINIA and VUE3 can be natural and smooth in use, they are not made for each other. PINIA does not have the same processing for VUE 3 responsive data as VUE 3 does when assigning data, and VUE 3 toRaw does not have a perfect way to restore PINIA data.

The final solution

After talking about the cause of the problem, let's briefly mention the wrong solution in this article. In fact, in the final analysis, our goal is to get a "clean" object. I finally solved it with JSON.stringify (), which also shows that the processing of JSON.stringify can solve the problem of proxy nesting.

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

At this point, I believe that everyone on the "vue3 with pinia error report how to solve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.