VueX狀態(tài)管理器的應(yīng)用

sydMobile 發(fā)布于2019-08-23 10:39 / 1822人閱讀

摘要：級(jí)別在中進(jìn)行請(qǐng)求數(shù)據(jù)請(qǐng)求數(shù)據(jù)的接口相當(dāng)于調(diào)用了在中定義的修改狀態(tài)的方法就是在改變狀態(tài)時(shí)要修改的數(shù)據(jù)，需要在這傳遞過(guò)去。

VueX狀態(tài)管理器

cnpm i vuex axios -S
1 創(chuàng)建Vuex 倉(cāng)庫(kù)
import Vue from "vue"
import Vuex from "vuex"
vue.use(Vuex)
const store = new VueX.store({
    state: {//存放狀態(tài)}，
    mutations:{//唯一修改狀態(tài)的地方，不在這里做邏輯處理}
})
export default store

2 在入口文件main.js下引入store
import store from "./store/index.js"
將store 放到根實(shí)例里  以供全局使用
new Vue({
    el:"#app",
    store,
    components:{App},
    template:
})
開(kāi)始使用store(以home組件為例)

Vuex的使用也是一種漸進(jìn)式的，你可以從最簡(jiǎn)單的開(kāi)始使用，根據(jù)經(jīng)驗(yàn)和技術(shù)的增加，再漸進(jìn)增強(qiáng)對(duì)它的使用，如果按照級(jí)別算vuex的使用可以從最基本的t1級(jí)別開(kāi)始，先總結(jié)最基本的前三個(gè)版本，后續(xù)有時(shí)間再總結(jié)其他的。

T1級(jí)別

1.
在hoome/script.js中進(jìn)行請(qǐng)求數(shù)據(jù)
import Vue from "vue"
import axios from "axios"
export default {
    mounted(){
        axios.get("請(qǐng)求數(shù)據(jù)的接口")
        .then((res)=>{this.$store.commit("changeList",res.data)})
           //changeList相當(dāng)于調(diào)用了在store.mutations中定義的修改狀態(tài)的方法
                    //res.data  就是在改變狀態(tài)時(shí)要修改的數(shù)據(jù)，需要在這傳遞過(guò)去。
        .catch((err)=>{console,log(err)})
        }
    }
2.
在store/index.js中定義
import Vue from "vue"
import Vuex from "vuex"
vue.use(Vuex)
const store = new VueX.store({
    state: {
        //存放狀態(tài)
        list: [ ]     //存放一個(gè)空的數(shù)組
}，
    mutations:{
        //唯一修改狀態(tài)的地方，不在這里做邏輯處理
        //定義一個(gè)修改list的方法
            //state 指上面存放list的對(duì)象，data 為在請(qǐng)求數(shù)據(jù)出傳過(guò)來(lái)請(qǐng)求到的數(shù)據(jù)
        changeList (state，data) {
            state.list = data  //將請(qǐng)求來(lái)的數(shù)據(jù)賦值給list
      }
    }
   })
export default store

3.
在home/index.vue中渲染


注意點(diǎn)：
（
如果我們?cè)趆ome組件中獲取的數(shù)據(jù)，可以在其他組件中使用，但是是當(dāng)頁(yè)面刷新默認(rèn)進(jìn)入home頁(yè)，也就是相當(dāng)于修改了數(shù)據(jù)，再點(diǎn)擊其他頁(yè)面也能有數(shù)據(jù)。如果我們?cè)趗ser組件中獲取的數(shù)據(jù)要在home組件中使用，當(dāng)頁(yè)面刷新數(shù)據(jù)是不會(huì)顯示的，因?yàn)榇藭r(shí)還沒(méi)有觸發(fā)user組件中的更改數(shù)據(jù)的方法，所以數(shù)據(jù)為空，當(dāng)點(diǎn)擊user頁(yè)面時(shí)，就會(huì)有數(shù)據(jù)，這個(gè)時(shí)候再去點(diǎn)擊home頁(yè)面我們就能夠看到在home 組件中使用user組件中獲取的數(shù)據(jù)了。解決這種問(wèn)題的辦法可以將數(shù)據(jù)存到本地一份或者都在首頁(yè)進(jìn)行請(qǐng)求數(shù)據(jù)
）

T2級(jí)別

在頁(yè)面進(jìn)行渲染的時(shí)候我們需要通過(guò)this.store.state去拿數(shù)據(jù)，這樣的寫(xiě)法太長(zhǎng)而且不太好
用計(jì)算屬性結(jié)合mapState去解決這個(gè)問(wèn)題
1
在home/script.js中進(jìn)行操作
import Vue from "vue"
import mapState from "vuex"
import axios from "axios"
export default {
    computed:{
        //mapState為輔助函數(shù)
        ...mapState(["list"])
    },
    mounted(){
        axios.get("請(qǐng)求數(shù)據(jù)的接口")
        .then((res)=>{this.$store.commit("changeList",res.data)})
        .catch((err)=>{console,log(err)})
        }
    }

2
在home/index.vue中渲染

T3級(jí)別



  使用常量去代替事件類(lèi)型(便于查看狀態(tài)，利于維護(hù))
    1
    在store下創(chuàng)建mutation-type.js
    export const  CHANGE_LIST = "CHANGE_LIST"
    
    2
    在store/index.js引入mutation-type.js
    import Vue from "vue"
    import Vuex from "vuex"
    import {CHANGE_LIST }  from‘./mutation-type.js’
    vue.use(Vuex)
    const store = new VueX.store({
        state: {
            list: [ ]     //存放一個(gè)空的數(shù)組
    }，
        mutations:{
        //我們可以使用Es6風(fēng)格的計(jì)算屬性命名功能來(lái)使用一個(gè)常量作為函數(shù)名
            [CHANGE_LIST] (state，data) {
                state.list = data  //將請(qǐng)求來(lái)的數(shù)據(jù)賦值給list
          }
        }
       })
    export default store
    
    3
    在home/script.js中進(jìn)行引入
    import Vue from "vue"
    import mapState from "vuex"
    import axios from "axios"
    import {CHANGE_LIST} from ‘../../store/mutation-type.js’
    export default {
        computed:{
            //mapState為輔助函數(shù)
            ...mapState(["list"])
        },
        mounted(){
            axios.get("請(qǐng)求數(shù)據(jù)的接口")
            .then((res)=>{this.$store.commit(CHANGE_LIST,res.data)})
            .catch((err)=>{console,log(err)})
            }
        }

云服務(wù)器 GPU云服務(wù)器寶塔應(yīng)用管理器寶塔應(yīng)用管理器使用服務(wù)器管理器的使用項(xiàng)目管理軟件的應(yīng)用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/96559.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

sydMobile

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ShockHosting日本機(jī)房VPS簡(jiǎn)單測(cè)試

閱讀 1759·2021-09-23 11:34
怎么買(mǎi)虛擬主機(jī)-如何購(gòu)買(mǎi)虛擬主機(jī)？需要注意什么？

閱讀 2481·2021-09-22 15:45
主機(jī)號(hào)全為0是什么地址-IP地址網(wǎng)絡(luò)位全為0，主機(jī)號(hào)隨意是什么地址？

閱讀 12967·2021-09-22 15:07
Zynq7000硬件開(kāi)發(fā)之電源供電系統(tǒng)(PDN)設(shè)計(jì)（一）

閱讀 2240·2021-09-02 15:40
CentOS7查看防火墻開(kāi)放端口命令及放行自定義端口方法

閱讀 4133·2021-07-29 14:48
web 移動(dòng)端 ios 瀏覽器中 animation 動(dòng)畫(huà)異常

閱讀 1081·2019-08-30 15:55
《CSS設(shè)計(jì)指南》讀書(shū)筆記

閱讀 3250·2019-08-30 15:55
深入理解Flex布局 -- flex-grow & flex-shrink & fl

閱讀 2197·2019-08-30 15:55

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

VueX狀態(tài)管理器的應(yīng)用

相關(guān)文章