vuex實現購物車邏輯

前言

在小型項目中，組件與組件之間通訊比較簡單。父組件可使用pros向子組件傳遞數據，子組件能夠經過$emit向父組件傳遞事件和數據，一旦狀態管理多了，代碼就會變得十分混亂。因爲狀態零散的分佈在許多組件和組件之間的交互中，大型應用複雜度也常常逐漸增加。vuex狀態管理庫能夠很方便的統一管理項目的狀態，不管是對如今的開發人員仍是未來新接手的開發人員都容易管理和維護。而且，一些邏輯代碼也能夠抽離出來，具體哪裏須要用到只須要分發一下事件，簡單方便。

Vuex組成

Vuex由如下部分組成：

• state 存放項目中各類多組件共享的狀態
• mutations 存放更改state裏狀態的方法
• getters 從state裏派生出來的狀態，，好比將state中的某種狀態進行過濾而後獲取到的新的狀態
• actions 經過commit mutations中的方法來改變狀態，能夠進行異步操做
• modules將狀態按模塊劃分，將Store對象分割成多個子模塊，使代碼結構更加清晰

通用配置

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文件中導出模塊

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文件上導出模塊的地方加上namespace:true就能夠了。

mapGetters,mapActions,mapState

當須要引入多個狀態和事件時不須要一個一個的引入，集體引入很方便
使用的時候要先引入這些變量

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

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

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

mapActions屬於事件

methods: {
    ...mapActions({
        ......
    })
}

實戰

實戰是最重要的，容易發現問題，能夠進步飛快~
用vuex完成的有關購物車部分的小項目：https://github.com/Gcalolin/v...

歡迎star~