Vuex 小tip

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

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里面的值并進行修改（不推薦）

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

一般將數(shù)據(jù)請求寫在action中，如果對數(shù)據(jù)渲染有先后順序的要求，可以將整個請求用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ù)時連用

    _this.getShopData().then()

建議

vuex雖然使用起來特別方便，但是對于小型項目，組件劃分不要太細

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

云服務器 GPU云服務器小tips層 js Vuex vuex cdn Vue_Vuex

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/92618.html

相關(guān)文章

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

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

KitorinZero 2019-08-14 14:33 評論0 收藏0
【開源】小程序And公眾號商城，外加后臺，功能齊全！

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

VishKozus 2019-08-23 13:49 評論0 收藏0
【開源】小程序And公眾號商城，外加后臺，功能齊全！

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

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

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

dcr309duan 2019-08-20 10:29 評論0 收藏0
美團小程序框架mpvue入門教程

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

YorkChen 2019-08-22 16:14 評論0 收藏0