vuex实现购物车逻辑

2024年2月5日 119次阅读 来源: 高压郭

前言

在小型项目中，组件与组件之间通信比较简单。父组件可以使用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~

    原文作者：高压郭
    原文地址: https://segmentfault.com/a/1190000013972706
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞