這篇文章將為大家詳細(xì)講解有關(guān)利用vuex怎么對數(shù)據(jù)進(jìn)行渲染，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供沅陵企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為沅陵眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

1.vuex是什么？

用官方的話來說“Vuex 就是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化”。而說的通俗易懂點(diǎn)就是”你想要在不同的組件中使用同一份數(shù)據(jù)，并且在不同的組件中都可以實(shí)時(shí)修改它并且這份數(shù)據(jù)保持同步“。

2.如何使用state中的數(shù)據(jù)

在你創(chuàng)建好store這個(gè)倉庫之后，并且在其中添加了相應(yīng)的數(shù)據(jù)以及修改它的方法，你就可以在你的組件中使用這個(gè)倉庫了。比如我們的store是這樣最簡單的一中：

在組件中渲染store中的數(shù)據(jù)

1.通過 this.$store來訪問store中的state數(shù)據(jù)，比如我們在頁面中使用一個(gè)p標(biāo)簽，在里面渲染store中的state中的數(shù)據(jù)，

{{count}}

，此時(shí)這個(gè)count應(yīng)該如何從store中拿出來了？

2.這時(shí)我們就需要在這個(gè)組件中獲取store中的數(shù)據(jù)了。我們可以直接在本組件的計(jì)算屬性computed中獲取

3.然后p標(biāo)簽中的count就會(huì)渲染出store中的count的值 0 了。

如果你覺得這樣寫太麻煩了，我們就可以使用vuex的輔助函數(shù)mapState

在使用這個(gè)輔助函數(shù)之前我們需要引入這個(gè)輔助函數(shù)

import {mapState } from 'vuex'

最后同樣是在計(jì)算屬性中使用它， ...mapState(["count"]) ,這樣同樣可以達(dá)到上面的效果，如果有多個(gè)數(shù)據(jù)，那就直接在這個(gè)數(shù)組后面添加就行了。列如...mapState(["count","count1",...]) ,需要哪個(gè)數(shù)據(jù)直接拿出來用就可以了

3.如何修改state中的數(shù)據(jù)

首先我們要知道，官網(wǎng)雖然說修改state中的數(shù)據(jù)方法就是提交 mutation。但是我們也可以直接修改state中的數(shù)據(jù)，列如this.$store.state.count = 1,這樣同樣修改了數(shù)據(jù)，但是好不要這樣，因?yàn)檫@樣雖然修改了數(shù)據(jù)，但是這樣可能造成一些問題，因?yàn)檫@樣vuex監(jiān)聽不到你的修改過程。

言歸正傳，如何提交mutation了?

1.創(chuàng)建一個(gè)方法來提交mutation，比如最簡單的點(diǎn)擊事件觸發(fā)某個(gè)方法，然后這個(gè)方法來提交mutation。+++,當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)就回觸發(fā)Add方法，而在Add方法中我們來提交mutation。

在vuex中提交mutation的方式就是使用this.$store.commit()方法，這個(gè)方法的參數(shù)就是你在store中的mutations中所寫的你需要調(diào)用的方法。例如上圖我們在mutations中創(chuàng)建的add方法，讓count自增，所以完整的寫法就是在Add方法中:this.$store.commit('add'), 這樣當(dāng)你點(diǎn)擊按鈕觸發(fā)組件中的Add方法，這個(gè)方法中在通過this.$store.commit('add')方法來修改store中的數(shù)據(jù)。

如果你覺得這樣也麻煩，同樣有輔助函數(shù)來幫助你，還是一樣，先引入這個(gè)輔助函數(shù)

import { mapMutations} from 'vuex'

然后在本組件的methods中調(diào)用它

...mapMutations(['add']), ,然后在按鈕點(diǎn)擊的時(shí)候直接觸發(fā)add方法就好了，不需要在去觸發(fā)Add方法了，例如： +++，這樣也可以修改vuex中的數(shù)據(jù)。

關(guān)于利用vuex怎么對數(shù)據(jù)進(jìn)行渲染就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：利用vuex怎么對數(shù)據(jù)進(jìn)行渲染-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/doiceh.html