vuex與組件聯(lián)合使用的方法
官方定義： Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。我的理解就是，vuex就是前端的數(shù)據(jù)庫(kù)。
1、首先核心是store，是個(gè)倉(cāng)庫(kù)，包含著state，因此第一步需要新建一個(gè)store。
顯示界面：
其中state就是倉(cāng)庫(kù)store，東西都存在這里。
2、從state中取數(shù)據(jù)，使用Lodash比較方便，語(yǔ)法如下：
也可以使用vuex的getters，語(yǔ)法;
官方文檔還結(jié)束通過(guò)屬性訪問(wèn)，通過(guò)方法訪問(wèn)等。https://vuex.vuejs.org/zh-cn/getters.html
3、向vuex中存數(shù)據(jù)。使用mutation，更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。
語(yǔ)法：
組件中語(yǔ)法：
其接受兩個(gè)參數(shù)，一個(gè)是state，另外一個(gè)是荷載（也就是你想傳的任何值，以對(duì)象形式）如：
上面例子中，‘open_table_layer'是個(gè)方法，這個(gè)方法接受的參數(shù)是1：state， 2：傳入的{index：。。。。。}（上圖）
方法語(yǔ)法;
總結(jié)
以上所述是小編給大家介紹的vuex與組件聯(lián)合使用的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
在vue中會(huì)將常用的組件進(jìn)行封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件封裝之input輸入框的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue-quill-editor二次封裝,實(shí)現(xiàn)自定義文件上傳方式
這篇文章主要介紹了vue-quill-editor二次封裝,實(shí)現(xiàn)自定義文件上傳方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼
本篇文章主要介紹了VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
element的el-table自定義最后一行的實(shí)現(xiàn)代碼
最后一行要顯示一些其他結(jié)果,用的是element? ui 自帶的數(shù)據(jù)總計(jì)的屬性；返回一個(gè)數(shù)組,會(huì)按下標(biāo)進(jìn)行展示,這篇文章主要介紹了element的el-table自定義最后一行的實(shí)現(xiàn)代碼,需要的朋友可以參考下2024-03-03
Vue模仿ElementUI的form表單實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue模仿ElementUI的form表單的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置(推薦)
這篇文章主要介紹了Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
vue cli3中eslint報(bào)錯(cuò)no-undef和eslint規(guī)則配置方式
這篇文章主要介紹了vue cli3中eslint報(bào)錯(cuò)no-undef和eslint規(guī)則配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)zip文件下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue或css動(dòng)畫實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue或css動(dòng)畫實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue實(shí)現(xiàn)路由切換改變title功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05