什么是vuex

落日映苍穹つ 2024-03-16 13:32 51阅读 0赞

## 什么是vuex ##

### 简介 ###

这里是vuex的官网[vuex][],在官网中有对其比较详细的解释，这里也给出我对于vuex的理解，后面会在文章中详细的讲解，state,Getter,Mutation,Action,Module。  
![在这里插入图片描述][fdf4bc9d94134b84912088d53eb1594b.png]

### 案例讲解 ###

好的，我可以通过一个电商案例来讲解一下Vuex。

假设您正在为一个电商网站开发购物车功能。在这个网站中，用户可以向购物车中添加商品，还可以从购物车中删除商品、更改商品数量以及结算购物车中商品的价格。

在此过程中，您会发现数据流非常复杂：在整个应用程序中，许多组件都需要访问购物车中存储的相同数据，包括购物车中的商品列表、购物车中商品的总数量以及购物车中商品的总价值。在传统的Vue.js编程方法中，可能需要使用链式属性和事件处理程序等技术跨组件传递这些数据。但是，用Vuex可以更轻松地管理这种情况。

首先，创建一个名为store.js的新文件。该文件将是您的Vuex Store模块。在store.js文件中，用以下代码初始化你的工作：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        
      state: {
        },
      mutations: {
        },
      actions: {
        }
    })

`state`参数指定了您的Vuex存储所维护的基础状态数据。对于购物车而言，这意味着包含购物车中所有商品详细信息的数组、购物车中所有商品数量的计数器以及购物车中所有商品总价格的计数器。下面是初始化购物车数据的示例：

state: {
        
      cartItems: [],
      cartItemCount: 0,
      cartTotalPrice: 0
    }

现在，您需要编写`mutations`函数来修改状态。在Vue中，所有状态更改都应该通过进行提交mutation来修改。

下面是一些基本的`mutations`声明用于购物车操作：

mutations: {
        
      addToCart(state, item) {
        
        state.cartItems.push(item)
        state.cartItemCount++
        state.cartTotalPrice += item.price
      },
      removeFromCart(state, itemIndex) {
        
        const item = state.cartItems[itemIndex]
        state.cartItems.splice(itemIndex, 1)
        state.cartItemCount -= item.quantity
        state.cartTotalPrice -= item.price * item.quantity
      },
      incrementItemQuantity(state, item) {
        
        item.quantity++
        state.cartItemCount++
        state.cartTotalPrice += item.price
      },
      decrementItemQuantity(state, item) {
        
        item.quantity--
        state.cartItemCount--
        state.cartTotalPrice -= item.price
    
        if (item.quantity <= 0) {
        
          const index = state.cartItems.indexOf(item)
          state.cartItems.splice(index, 1)
        }
      }
    }

您会注意到这些函数都有一个名为“state”的参数。 这个参数是整个应用程序的Vuex存储对象。 `addToCart` mutations会将传递给它的商品项添加到购物车状态（单个商品数量增加），并更新计数器以及购物车总价格。`removeFromCart` mutations会删除选中的商品项，并减少购物车数量和总价值。`incrementItemQuantity` mutations会将商品数量递增，而其对应的对象计数器和总价值也会同步更新。`decrementItemQuantity` mutations会将商品数量递减，同时更新相应的状态。如果商品数量降至0, 则从购物车中删除该商品。

现在，您需要为这些mutations添加actions。 `Action`是如何提交一个mutations来更新Vuex状态的方法。下面是一些基本的action声明用于购物车操作：

actions: {
        
      addToCart(context, item) {
        
        context.commit('addToCart', item)
      },
      removeFromCart(context, itemIndex) {
        
        context.commit('removeFromCart', itemIndex)
      },
      incrementItemQuantity(context, item) {
        
        context.commit('incrementItemQuantity', item)
      },
      decrementItemQuantity(context, item) {
        
        context.commit('decrementItemQuantity', item)
      }
    }

注意到，每个`Action`都有一个名为“context”的参数。 `context`实际上是Vuex Store的实例。在这些actions中，您可以通过`context.commit('mutation')`以调用相应的`mutations`来更新状态。

最后，在Vue组件中，您可以使用计算属性来访问和更新购物车状态。下面是一个示例Vue组件，其中包括了基本的添加商品到购物车中的按钮：

<template>
      <div>
        <button @click="addToCart">Add to Cart</button>
      </div>
    </template>
    
    <script>
    export default {
      computed: {
        cartItems() {
          return this.$store.state.cartItems
        },
        cartItemCount() {
          return this.$store.state.cartItemCount
        },
        cartTotalPrice() {
          return this.$store.state.cartTotalPrice
        }
      },
      methods: {
        addToCart() {
          const item = { /* 商品信息 */ }
          this.$store.dispatch('addToCart', item)
        }
      }
    }
    </script>

注意到，此组件中检索状态数据时用到了`computed`计算属性，并在执行添加操作时使用了actions函数来提交`addToCart` mutations。现在，因为您的状态已保存在Vuex Store中，因此所有其他Vue组件都可以很容易地访问它。

至此，您已经学会了如何使用Vuex来管理复杂的应用程序状态数据。不仅如此，Vuex还提供了许多有用的工具和特性，例如`getters`、`modules`、`plugins`等，可以帮助您更好地管理和监视应用程序的状态。

[vuex]: https://vuex.vuejs.org/zh/guide/
[fdf4bc9d94134b84912088d53eb1594b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2175f4fe28ca4686aca4d5bb75a11034.png