Vuex 小tip

HelKyle 發(fā)布于2019-08-22 13:55 / 1669人閱讀

vuex基本使用和相關(guān)規(guī)范

dispatch提交action,commit提交mutation。dispatch是異步，commit 是同步

通過使用,import和mapActions 可以獲取action的方法并且能夠直接調(diào)用或重命名調(diào)用

只允許通過mutation 來變更state的狀態(tài)（內(nèi)容）

官方Action介紹

action介紹

    import {
        mapActions
    } from "vuex"
    
    ...mapActions({
        getListsData: "getListsData"
    })

使用的相關(guān)小技巧

可以通過this.$store.state.這種方法取到state里面的值并進(jìn)行修改（不推薦）

dispatch和commit的時(shí)候，第二個(gè)參數(shù)可以帶一個(gè)載荷，這是一個(gè)json，且不允許有第三個(gè)參數(shù)

一般將數(shù)據(jù)請(qǐng)求寫在action中，如果對(duì)數(shù)據(jù)渲染有先后順序的要求，可以將整個(gè)請(qǐng)求用promise return

    getShopData({ commit }, resData) {
        return axios.post(url, resData).then((res) => {
            commit("getShopData", res)
            commit("displayPoints")
            commit("setShopScore", res.data.shopDetail.recommendScore)
            commit("getShopDetailIntro")
        })
    }

這種方法一般是和頁面直接引入action函數(shù)時(shí)連用

    _this.getShopData().then()

建議

vuex雖然使用起來特別方便，但是對(duì)于小型項(xiàng)目，組件劃分不要太細(xì)

提交狀態(tài)盡量按照標(biāo)準(zhǔn)寫法來提交，不要直接修改狀態(tài)

GPU云服務(wù)器云服務(wù)器小tips層 js Vuex vuex cdn Vue_Vuex

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

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

相關(guān)文章

使用Vue快速開發(fā)單頁應(yīng)用－功能組件與路由組件通信

摘要：展示信息展示時(shí)間結(jié)束后，執(zhí)行回調(diào)函數(shù)如果有上面就完成了組件的整套邏輯，最后我們還需要把組件掛在。原文鏈接其他使用快速開發(fā)單頁應(yīng)用主體結(jié)構(gòu)使用快速開發(fā)單頁應(yīng)用使用快速開發(fā)單頁應(yīng)用登錄頁面使用快速開發(fā)單頁應(yīng)用功能組件與路由組件通信本文所涉及代碼全在vue-cnode showImg(https://segmentfault.com/image?src=http://7fvhwe.com1...

KitorinZero 2019-08-14 14:33 評(píng)論0 收藏0
【開源】小程序And公眾號(hào)商城，外加后臺(tái)，功能齊全！

摘要：前言一個(gè)集微信公眾號(hào)商城小程序商城商城后臺(tái)的一個(gè)開源項(xiàng)目，后臺(tái)是基于開發(fā)的，是一個(gè)簡(jiǎn)潔而強(qiáng)大的開源微信公眾平臺(tái)開發(fā)框架，微信功能插件化開發(fā)多公眾號(hào)管理配置簡(jiǎn)單。微信小程序項(xiàng)目下載整個(gè)包之后，進(jìn)行根目錄文件夾。前言一個(gè)集微信公眾號(hào)商城/小程序商城/商城后臺(tái)的一個(gè)開源項(xiàng)目，后臺(tái)是基于WeiPHP5.0開發(fā)的，WeiPHP是一個(gè)簡(jiǎn)潔而強(qiáng)大的開源微信公眾平臺(tái)開發(fā)框架，微信功能插件化開發(fā),多...

VishKozus 2019-08-23 13:49 評(píng)論0 收藏0
【開源】小程序And公眾號(hào)商城，外加后臺(tái)，功能齊全！

摘要：前言一個(gè)集微信公眾號(hào)商城小程序商城商城后臺(tái)的一個(gè)開源項(xiàng)目，后臺(tái)是基于開發(fā)的，是一個(gè)簡(jiǎn)潔而強(qiáng)大的開源微信公眾平臺(tái)開發(fā)框架，微信功能插件化開發(fā)多公眾號(hào)管理配置簡(jiǎn)單。微信小程序項(xiàng)目下載整個(gè)包之后，進(jìn)行根目錄文件夾。前言一個(gè)集微信公眾號(hào)商城/小程序商城/商城后臺(tái)的一個(gè)開源項(xiàng)目，后臺(tái)是基于WeiPHP5.0開發(fā)的，WeiPHP是一個(gè)簡(jiǎn)潔而強(qiáng)大的開源微信公眾平臺(tái)開發(fā)框架，微信功能插件化開發(fā),多...

linkFly 2019-07-01 11:00 評(píng)論0 收藏0
使用Vue快速開發(fā)單頁應(yīng)用－主體結(jié)構(gòu)

摘要：本文以及后面相應(yīng)文章，主要是相關(guān)技術(shù)棧來快速的實(shí)現(xiàn)單頁應(yīng)用開發(fā)。原文出處其他使用快速開發(fā)單頁應(yīng)用主體結(jié)構(gòu)使用快速開發(fā)單頁應(yīng)用使用快速開發(fā)單頁應(yīng)用登錄頁面使用快速開發(fā)單頁應(yīng)用功能組件與路由組件通信本文所涉及代碼全在vue-cnode 單頁應(yīng)用，即在一個(gè)頁面集成系統(tǒng)中所有功能，整個(gè)應(yīng)用只有一個(gè)頁面。因?yàn)槁酚傻目刂圃谇岸耍瑔雾撁鎽?yīng)用在頁面切換時(shí)比傳統(tǒng)頁面更快，從而在前端體驗(yàn)更好。將邏輯從...

dcr309duan 2019-08-20 10:29 評(píng)論0 收藏0
美團(tuán)小程序框架mpvue入門教程

摘要：美團(tuán)小程序框架入門教程自打?qū)懥嗣缊F(tuán)小程序框架蹲坑指南一發(fā)不可收拾，今天趁周末空閑，來寫個(gè)沒朋友的簡(jiǎn)單入門教程，本教程只針對(duì)新手，老鳥勿噴。美團(tuán)小程序框架mpvue入門教程自打?qū)懥?美團(tuán)小程序框架mpvue蹲坑指南,一發(fā)不可收拾，今天趁周末空閑，來寫個(gè)mpvue(沒朋友)的簡(jiǎn)單入門教程，本教程只針對(duì)新手，老鳥勿噴。另外，我還專門為本文做了一個(gè)簡(jiǎn)單的項(xiàng)目，如果懶得從頭開始搭項(xiàng)目的童鞋...

YorkChen 2019-08-22 16:14 評(píng)論0 收藏0