vue裡store被意外修改

2022-08-22 12:03:15 字數 775 閱讀 4462

還是接著上次那個接手的專案,還是那裡面的bug。還是在編輯資訊的時候,使用者資訊是存在store裡的,從個人中心頁面點選編輯按鈕到編輯頁面,此時是正常的,但是如果在編輯頁面修改了東西,沒有儲存,按道理來說下次進入編輯介面的時候是不應該保持上一次編輯的資訊的。於是我翻看了**裡繫結資料的物件,果然,有一句**引起了我的注意:

這句看似平常的一句**,實際卻「暗藏殺機」,列印了一下每次執行這句話之前infos的值,發現只要編輯了表單,store裡infos的值也被改了,vue-store的官網上明確的說了,要顯式的提交mutation才能改變store裡的值,那為啥這個地方只是賦值給this.infos卻仍然改變了store裡的infos?通過了解明白了一些事情,直接賦值物件,改變這個物件,自然也是會改變父物件的值啊,這本來就是js的基礎知識嘛,vue裡也是允許這樣的啊,所以這句**,如果iinfos只是展示作用是沒問題的,但是如果要修改編輯的話,就不能直接這樣賦值了,可以使用賦值運算子[...this.$store.getters.infos]的方式,也可以更安全保險的通過

這種方式,這樣是互不影響的。

那麼問題來了,既然可以直接修改store裡的值,為啥官方還是要求我們顯式的mutation呢?原因是vue裡隱藏的另乙個問題,那就是watch不會監聽到陣列的一些方法,比如this.arr[0] = 2,這種情況不會監聽到,也就不會觸發ui更新,所以保險起見,store需要我們顯式提交更改。感覺vue裡各種方法和功能都是環環相扣啊!

VUE狀態管理 store

管理全域性變數,便於元件之間傳值 1 在store資料夾中新建index.js檔案 import vue from vue 引入vue import vuex from vuex 引入vue 使用vuex vue.use vuex 建立vuex例項 const store new vuex.stor...

store頁面重新整理資料被重置及解決方法

所謂單頁應用,就是在不重新整理瀏覽器的情況下可以在整個網頁應用實時共享資料。store是記憶體機制,不是快取機制,頁面重新整理和關閉都會導致store初始化,store裡面一般儲存什麼資料呢?1 元件的初始狀態 2 後端資料的初始狀態 如果你需要儲存是資料是要實時儲存並且讀取顯示出來,那麼存在本地快...

vue動態新增store 路由和國際化配置

想寫公共能力?用這個吧 store module標準格式 import demo from store modules demo store.registermodule demo demo 從後端載入路由不再是夢 路由陣列標準格式 import routerarray from router ro...