成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vuex實現(xiàn)購物車邏輯

阿羅 / 3300人閱讀

摘要：當(dāng)需要引入多個狀態(tài)和事件時不需要一個一個的引入，集體引入很方便使用的時候要先引入這些變量值都屬于計算屬性，在文件中寫在里面屬于事件實戰(zhàn)實戰(zhàn)是最重要的，容易發(fā)現(xiàn)問題，可以進(jìn)步飛快用完成的有關(guān)購物車部分的小項目歡迎

前言

在小型項目中，組件與組件之間通信比較簡單。父組件可以使用pros向子組件傳遞數(shù)據(jù)，子組件可以通過$emit向父組件傳遞事件和數(shù)據(jù)，一旦狀態(tài)管理多了，代碼就會變得十分混亂。由于狀態(tài)零散的分布在許多組件和組件之間的交互中，大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長。vuex狀態(tài)管理庫可以很方便的統(tǒng)一管理項目的狀態(tài)，無論是對現(xiàn)在的開發(fā)人員還是將來新接手的開發(fā)人員都容易管理和維護(hù)。并且，一些邏輯代碼也可以抽離出來，具體哪里需要用到只需要分發(fā)一下事件，簡單方便。

Vuex組成

Vuex由以下部分組成：

state 存放項目中各種多組件共享的狀態(tài)

mutations 存放更改state里狀態(tài)的方法

getters 從state里派生出來的狀態(tài)，，比如將state中的某種狀態(tài)進(jìn)行過濾然后獲取到的新的狀態(tài)

actions 通過commit mutations中的方法來改變狀態(tài)，可以進(jìn)行異步操作

modules將狀態(tài)按模塊劃分，將Store對象分割成多個子模塊，使代碼結(jié)構(gòu)更加清晰

通用配置 
import * as types from "../types.js"
const state = {}
const actions = {}
const mutations = {}
const getters = {}
export default {
    state,
    actions,
    mutations,
    getters
}

若是有多個模塊：

|__store
    |__moduleName1
    |__moduleName2
        |__state.js
        |__types.js
        |__actions.js
        |__mutations.js
        |__index.js
        |__getters.js
    |__index.js

在index.js文件中導(dǎo)出模塊

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

import moduleName1 from "./moduleName1"
import moduleName2 from "./moduleName2"


export detault new Vuex.Store({
    modules: {
        moduleName1,
        moduleName2,
    }
})

注意點：
所有子模塊的getters對象里的方法會被合并到$store里，如果不同的子模塊有重名的方法，就會報錯，只要在index.js文件上導(dǎo)出模塊的地方加上namespace:true就可以了。

mapGetters,mapActions,mapState

當(dāng)需要引入多個狀態(tài)和事件時不需要一個一個的引入，集體引入很方便
使用的時候要先引入這些變量

import {mapGetters, mapActions, mapState} from "vuex"

mapGetters,mapState值都屬于計算屬性，在文件中寫在computed里面

computed: {
    ...mapGetters({
        ......
    }),
    ...mapState({
        ......
    }),
    otherCompuedValue() {......}
}

mapActions屬于事件

methods: {
    ...mapActions({
        ......
    })
}
實戰(zhàn)

實戰(zhàn)是最重要的，容易發(fā)現(xiàn)問題，可以進(jìn)步飛快~
用vuex完成的有關(guān)購物車部分的小項目：https://github.com/Gcalolin/v...

歡迎star~

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

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

相關(guān)文章

  • vue2 + vuex 高度還原 餓了么 App，與官方后臺真實數(shù)據(jù)交互，獲取商品信息，實現(xiàn)登陸、購

    摘要：注此項目純屬個人瞎搞，正常下單請選擇餓了么官方客戶端。目前下單功能已經(jīng)實現(xiàn)，下單功能完全采用官網(wǎng)真實數(shù)據(jù)，可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機(jī)號碼，下單后可以在手機(jī)中查看并且付款。 前言 vue2的發(fā)布后自己也研究了一段時間，奈何公司的技術(shù)棧是以react為主，沒有機(jī)會好好利用vue2去做一個完整的項目。雖然寫了幾個demo，但和寫一個完整的項目還是有很大差別的。于是自己想著用空余...

    JeOam 評論0 收藏0

  • 瞎說vuex

    摘要：本來說好寫完組件通信后就會寫相關(guān)的東西，現(xiàn)在快過去兩個多月了，主要是由于自己工作的原因，后面會保證更新速度的。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。改變中的狀態(tài)的唯一途徑就是顯式地提交。 本來說好寫完組件通信后就會寫vuex相關(guān)的東西，現(xiàn)在快過去兩個多月了，主要是由于自己工作的原因，后面會保證更新速度的。不廢話了，直接正題。個人博客...

    OBKoro1 評論0 收藏0

  • Vue全家桶商城全站升級之引入HTTPS,PWA,錯誤監(jiān)控,持續(xù)構(gòu)建。

    摘要：免費升級到升級到后，服務(wù)器可以開啟版本，對比性能和緩存各方面要更好，還有其他新特性，可以啟動功能，更好的進(jìn)行離線緩存，更好的離線體驗。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在線地址:https://fancy.czero.cn 手機(jī)掃描二維碼查看: showImg(http...

    zengdongbao 評論0 收藏0

  • [vue][plugin][vuex][自總結(jié)] - vuex-總結(jié)

    摘要：原文出自本人博客的詳細(xì)總結(jié)博主博客兼乎說在前面最近在使用做項目，所以有了總結(jié)的念頭。在這種情況下，只有當(dāng)所有觸發(fā)函數(shù)完成后，返回的才會執(zhí)行。當(dāng)模塊被注冊后，它的所有及都會自動根據(jù)模塊注冊的路徑調(diào)整命名。 原文出自本人博客：vuex的詳細(xì)總結(jié)博主博客--兼乎 說在前面 最近在使用vuex做項目，所以有了總結(jié)vuex的念頭。于是在本天中午到晚上9點，我一直沒有停過，為了能盡快將vuex的重...

    dackel 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<