vuex 實現(xiàn)getter值賦值給vue組件里的data示例
更新時間：2019年11月05日 16:10:49 作者：不停奔跑的牛二牛
今天小編就為大家分享一篇vuex 實現(xiàn)getter值賦值給vue組件里的data示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
通過watch將orderDetailsData對象賦值給data中的consignee對象，這樣能將操作能避免v-model修改時，直接改動vuex中的值。
<template>
<input type="text" placeholder="請輸入收貨人名字" v-model="consignee.name">
<input type="text" placeholder="請輸入收貨地址" v-model="consignee.address">
<input type="text" placeholder="請輸入收貨人手機號" v-model="consignee.mobile">
</template>
<script>
data () {
return {consignee: {}}
},
computed:{
...mapGetters([
'orderDetailsData',
])
},
watch: {
orderDetailsData: {
handler: function (val, oldVal) {
this.consignee.name = val.consignee; //收貨人名字
this.consignee.address = val.address; //收貨人地址
this.consignee.mobile = val.mobile; //收貨人電話
},
deep: true
}
}
<script>
以上這篇vuex 實現(xiàn)getter值賦值給vue組件里的data示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?eslint報錯:Component?name?“xxxxx“?should?always?be?
新手在使用腳手架時總會報各種錯,下面這篇文章主要給大家介紹了關(guān)于vue?eslint報錯:Component?name?“xxxxx“?should?always?be?multi-word.eslintvue的4種解決方案,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了一篇Vue、React重點詳解大全，文章內(nèi)容詳細，通過案例可以更好的理解其相關(guān)知識，需要的朋友可以參考下2023-01-01
在Vite項目中配置路由時,可能會遇到文件路徑錯誤導致的加載失敗問題,常見的解決辦法包括安裝路徑處理插件、正確設(shè)置vite.config.js中的路徑別名以及重啟項目,通過正確配置,可以確保路由正確加載對應的界面文件,避免路徑錯誤導致的問題2024-10-10
淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法
下面小編就為大家分享一篇淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue中使用h5 video標簽實現(xiàn)彈窗播放本地視頻的方法
本文主要介紹了vue中使用h5 video標簽實現(xiàn)彈窗播放本地視頻的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
Vue?element-ui表格內(nèi)嵌進度條功能實現(xiàn)方法
Element-Ul是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui表格內(nèi)嵌進度條功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
vue 監(jiān)聽input輸入事件(oninput)的示例代碼支持模糊查詢
這篇文章主要介紹了vue 監(jiān)聽input輸入事件(oninput)支持模糊查詢,比如說表格模糊查詢，實現(xiàn)一邊輸入，一邊過濾數(shù)據(jù)，本文通過示例代碼給大家詳細講解，需要的朋友可以參考下2023-02-02
Vue中的虛擬DOM是通過JavaScript對象來描述真實DOM結(jié)構(gòu)的一種方式，本文將介紹Vue中虛擬DOM的簡單實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2023-05-05
本文給大家介紹基于 Vue 實現(xiàn)一個酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎(chǔ)知識，本文分步驟給大家介紹的非常詳細，需要的朋友參考下吧2017-11-11
這篇文章主要為大家介紹了vuex頁面刷新數(shù)據(jù)丟失解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07