什么是vuex

什么是vuex

什么是vuex

简介

这里是vuex的vuex,在中有对其比较详细的解释，这里也给出我对于vuex的理解，后面会在文章中详细的讲解，state,Getter,Mutation,Action,Module。

案例讲解

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

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

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

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

代码语言：javascript代码运行次数：0运行复制

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutati: {},
  acti: {}
})

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

代码语言：javascript代码运行次数：0运行复制

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

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

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

代码语言：javascript代码运行次数：0运行复制

mutati: {
  addToCart(state, item) {
    push(item)
    ++
     += item.price
  },
  removeFromCart(state, itemIndex) {
    ct item = [itemIndex]
    splice(itemIndex, 1)
     -= item.quantity
     -= item.price * item.quantity
  },
  incrementItemQuantity(state, item) {
    item.quantity++
    ++
     += item.price
  },
  decrementItemQuantity(state, item) {
    item.quantity--
    --
     -= item.price

    if (item.quantity <= 0) {
      ct index = indexOf(item)
      splice(index, 1)
    }
  }
}

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

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

代码语言：javascript代码运行次数：0运行复制

acti: {
  addToCart(context, item) {
    contextmit('addToCart', item)
  },
  removeFromCart(context, itemIndex) {
    contextmit('removeFromCart', itemIndex)
  },
  incrementItemQuantity(context, item) {
    contextmit('incrementItemQuantity', item)
  },
  decrementItemQuantity(context, item) {
    contextmit('decrementItemQuantity', item)
  }
}

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

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

代码语言：javascript代码运行次数：0运行复制

<template>
  <div>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
export default {
  computed: {
    cartItems() {
      return this.$store.
    },
    cartItemCount() {
      return this.$store.
    },
    cartTotalPrice() {
      return this.$store.
    }
  },
  methods: {
    addToCart() {
      ct item = { /* 商品信息 */ }
      this.$store.dispatch('addToCart', item)
    }
  }
}
</script>

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

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

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-20，如有侵权请联系 cloudcommunity@tencent 删除前往查看statevuex管理数据存储