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~