vuex中能直接修改state嗎
vuex中能直接修改state嗎
當(dāng)我們使用vuex的時(shí)候，時(shí)不時(shí)能看到“更改Vuex中的store中的狀態(tài)唯一辦法就是提交mutations”，但是有沒有試想過(guò)，我們不提交mutations其實(shí)也能修改state的值？答案是可以的
我們可以直接使用如下方式；
this.$store.state.num=666;
其中，這樣修改的話，store中的state數(shù)據(jù)可以改變且是響應(yīng)式，瀏覽器控制臺(tái)并無(wú)報(bào)錯(cuò)信息輸出，但是不建議這樣做，原因如下：
官方文檔中也有描述，如下：
開啟嚴(yán)格模式，僅需在創(chuàng)建 store 的時(shí)候傳入 strict: true； 在嚴(yán)格模式下，無(wú)論何時(shí)發(fā)生了狀態(tài)變更且不是由 mutation 函數(shù)引起的，將會(huì)拋出錯(cuò)誤。這能保證所有的狀態(tài)變更都能被調(diào)試工具跟蹤到。
所以，綜上，我們能夠得出結(jié)論，
使用commit提交狀態(tài)修改是為了配合開發(fā)者工具使用，使得狀態(tài)更好的被最終，保存狀態(tài)快照，實(shí)現(xiàn)時(shí)間漫游／回滾之類的操作。
然后前端面試中面試官也有可能會(huì)問(wèn)到相關(guān)問(wèn)題？=》請(qǐng)問(wèn)可以直接修改vuex中的state的數(shù)據(jù)嗎？這個(gè)時(shí)候小伙伴們就應(yīng)該知道怎么回答了。
在vuex中，不經(jīng)過(guò)mutations能直接修改state中的數(shù)據(jù)嗎？為什么
不經(jīng)過(guò)mutations不能直接修改state中的數(shù)據(jù)，因?yàn)閟tate是實(shí)時(shí)更新的，如果直接修改state中的數(shù)據(jù)是異步操作，當(dāng)state異步還沒有執(zhí)行完，state的數(shù)據(jù)就有可能發(fā)生變化，會(huì)導(dǎo)致程序出問(wèn)題，所以必須通過(guò)mutations限制state不允許異步操作。
在vue中使用vuex，修改state的值
1、 安裝 vuex
npm install vuex -S
2、在目錄下創(chuàng)建store文件
3、 在store.js編輯一個(gè)修改state的方法
然后在mian.js中全局引入
最后在組件中使用
這個(gè)的功能是運(yùn)用mutations
修改state中的值
到此這篇關(guān)于vuex中能直接修改state嗎？的文章就介紹到這了,更多相關(guān)vuex修改state內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng)
這篇文章主要給大家介紹了關(guān)于Vue如何動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁(yè)面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認(rèn)情況下會(huì)平均分配給剩余的列,需要的朋友可以參考下2023-07-07
Electron-vue腳手架改造vue項(xiàng)目的方法
這篇文章主要介紹了Electron-vue腳手架改造vue項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue中.env文件配置環(huán)境變量的實(shí)現(xiàn)
本文主要介紹了vue中.env文件配置環(huán)境變量的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
前端登錄退出處理Token問(wèn)題(獲取、緩存、失效處理)及代碼實(shí)現(xiàn)方法
token是一個(gè)用戶信息的表示,在登錄中將會(huì)從后端拿到token,然后用戶才可以進(jìn)行往后的一系列操作,這篇文章主要給大家介紹了關(guān)于前端登錄退出處理Token問(wèn)題(獲取、緩存、失效處理)及代碼實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-01-01
VUE異步更新DOM - 用$nextTick解決DOM視圖的問(wèn)題
這篇文章主要介紹了VUE異步更新DOM - 用$nextTick解決DOM視圖的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue3父子組件傳值中props使用細(xì)節(jié)淺析
這篇文章主要給大家介紹了關(guān)于vue3父子組件傳值中props使用細(xì)節(jié)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
Vue集成three.js并加載glb、gltf、FBX、json模型的場(chǎng)景分析
這篇文章主要介紹了Vue集成three.js，并加載glb、gltf、FBX、json模型,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
Django+Vue實(shí)現(xiàn)WebSocket連接的示例代碼
這篇文章主要介紹了Django+Vue實(shí)現(xiàn)WebSocket連接的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue實(shí)現(xiàn)點(diǎn)擊翻轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊翻轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要為大家詳細(xì)介紹了vue+js實(shí)現(xiàn)視頻的淡入淡出，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08