上回說(shuō)到Vue組件間通訊,最后留了一個(gè)彩蛋~~~Vuex。Vuex是另一種組件通訊的方法,這節(jié)來(lái)說(shuō)說(shuō)Vuex(store倉(cāng)庫(kù))。
創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、大方網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開(kāi)發(fā)、大方網(wǎng)絡(luò)營(yíng)銷(xiāo)、大方企業(yè)策劃、大方品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供大方建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:bm7419.com
首先Vuex需要安裝,安裝的方式有很多,在這里就不一一細(xì)說(shuō)了。我是通過(guò)npm方式安裝的:
npm install vuex --save
安裝好之后需要再main.js里全局引入:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)new Vue({el:'#app',store,components: { App },template: '<App/>'})
這樣就完成了Vuex的安裝。接下來(lái)就是Vuex的用法了:
Vuex有五個(gè)屬性:State、Getter、Mutation、Action、Module。
1. State里放入的是倉(cāng)庫(kù)的數(shù)據(jù),類似于js里的data:
import Vue from 'vue' const modules = { state:{ name: '小白' } namespaced: true } export default modules
把Vuex放入src下的store文件里,建一個(gè)新的組件modules,然后把他拋出來(lái),被引入所需數(shù)據(jù)的組件:
<script> import { mapState }from 'vuex' export default { computed:{ // name(){ // return this.$store.state.name // } ...mapState(['name']) }, mounted(){ console.log(this.name) } } </script>
Vuex里的數(shù)據(jù)需要從計(jì)算屬性(computed)里獲取,我寫(xiě)了兩種我常用的方法,都可以接收到數(shù)據(jù),在mounted鉤子里打印出的數(shù)據(jù):
這里只是舉個(gè)例子教大家如何用,不建議大家向我這樣去寫(xiě),Vuex應(yīng)該用于所有業(yè)務(wù)邏輯的數(shù)據(jù)。不涉及到業(yè)務(wù)邏輯的,建議大家用上一章的方法:Vue組件間通信。
2. Getters里放入State里數(shù)據(jù)的擴(kuò)展數(shù)據(jù),可以把它當(dāng)作計(jì)算屬性。比如State里有一個(gè)數(shù)組,就可以從Getters里獲取到數(shù)組的長(zhǎng)度,或是取到對(duì)象里面的屬性,用法和計(jì)算屬性類似:
import Vue from ‘vue' const modules = { state:{ list:[ {id :1,content: '第一條'}, {id :2,content: '第二條'} ] }, getter:{ listLength: (state)=>{return state.list.length} }, namespaced: true}export default modules;
我在state里存了一個(gè)數(shù)組,然后getters計(jì)算出state里數(shù)組的長(zhǎng)度,接下來(lái)就是在組件里接收了:
<script> import { mapGetters } from 'Vuex' export default { compoted:{ ...mapGetters(['listLength']) }, mounted(){ console.log(this.listLegth) } } </script>
打開(kāi)控制臺(tái)打印出2,就是list數(shù)組的長(zhǎng)度。
3. Mutations是保存在倉(cāng)庫(kù)的方法,這個(gè)方法只能用來(lái)改變state里面的數(shù)據(jù),而且想要改變state里的數(shù)據(jù)只能用mutations里的方法,并且它里面的方法只能是同步的:
import Vue from 'vue' const modules = { state:{ name: '小黑' }, mutations:{ changeName(state){ state.name = '小白' } }, namespaced: true } export default modules;
還是那個(gè)例子,下面是組件調(diào)用方法:
<html> <div> {{ name }} <el-button @click="changeName">改變名字</el-button> </div> </html> <script> import { mapState,mapMutations } from 'vuex' export default { compoted:{ ...mapState(['name']) }, methods:{ ...mapMutations(['changeName']) } } </script>
頁(yè)面渲染后為:
點(diǎn)擊按鈕之后為:
組件里的按鈕通過(guò)調(diào)用Vuex里的mutation方法將Vuex里的state數(shù)據(jù)改變,只不過(guò)mutations方法只能同步的,涉及到接口的就不能在它里面寫(xiě),怎么辦的?往下看:
4. Actions和mutations一樣都是Vuex里的方法,只不過(guò)他們有兩個(gè)最大的不同:
(1) Actions里可以存放異步方法,而Mutations只能放同步的;
(2) Actions里不可以更改state里的數(shù)據(jù),state里的數(shù)據(jù)只能在Mutations里更改。
Actions是什么方法?簡(jiǎn)單的說(shuō),它就是一個(gè)Promise方法,通過(guò)不同的狀態(tài)執(zhí)行不同的方法,執(zhí)行方法可以是Actions里的方法,也可以是Mutations里的方法。
Actions我就不舉例子了,因?yàn)榇蟛糠侄加糜赼xios請(qǐng)求接口,簡(jiǎn)單跟大家說(shuō)說(shuō)這個(gè)東西怎么使用:
import Vue from 'vue' import request from '@/api/axios' const modules = { state:{ list:[] }, actions:{ getList({ commit }){ // 調(diào)用接口方法 request.getList() .then((response)=>{ // commit用來(lái)分配mutations方法 commit('getList',response) }) } }, mutations:{ getList(state,response){ state.list = response.data } } }
簡(jiǎn)單利用actions異步方法分配給mutations方法,然后在mutations方法里給state里的數(shù)據(jù)賦值,取到接口數(shù)據(jù)。
commit用于分配mutations方法,dispatch用于分配actions方法,都需要傳參進(jìn)去。
組件調(diào)用其實(shí)和調(diào)用mutations方法類似:
<script> import { mapState,mapActions } from 'vuex' export default { computed:{ ...mapState(['list']) }, mounted(){ this.getList() }, methods:{ ...mapActions(['getList']) } } </script>
這樣就基本完成了vuex傳值。
5. module可以把vuex分為不同的模塊,使業(yè)務(wù)邏輯變得更清晰,更準(zhǔn)確。在上面的代碼里,有const modules,給它不同的名字就是分為不同的模塊。不同的module可以存入不同的數(shù)據(jù)和方法,使用起來(lái)非常方便。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站題目:Vue組件間通信Vuex的用法解析
網(wǎng)頁(yè)地址:http://bm7419.com/article44/iihjhe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、服務(wù)器托管、網(wǎng)站收錄、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)