Vue第五篇：电商网站登录时vuex的使用

**Vue 第五篇: 电商网站登录时 Vuex 的使用**

在前几篇文章中，我们已经学习了 Vue 的基本概念、组件化开发、路由管理等知识。今天我们要讨论的是电商网站登录时如何使用 Vuex 来管理状态。

###什么是VuexVuex 是一个用于管理 Vue 应用状态的库，它提供了一种集中式的状态管理方式，方便我们在应用中共享和更新数据。

### 为什么需要Vuex在电商网站中，我们可能会有多个页面，例如登录页、商品列表页、购物车页等。在这些页面之间，我们可能需要共享一些状态，如用户信息、购物车内容等。如果不使用 Vuex，这些状态将需要通过 props 或 eventBus 来传递，这样做虽然简单，但也很容易导致代码冗余和维护困难。

### 使用Vuex的步骤1. **安装Vuex**:首先，我们需要在项目中安装 Vuex 库。

bashnpm install vuex --save

2. **创建store**:然后，我们需要创建一个 store 文件夹，并在其中创建 index.js 文件，这个文件将作为我们的 Vuex Store 的入口点。

### 创建Store

javascript// store/index.jsimport Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
 user: null,
 cart: []
}

const mutations = {
 SET_USER(state, user) {
 state.user = user },
 ADD_TO_CART(state, item) {
 state.cart.push(item)
 }
}

const actions = {
 setUser({ commit }, user) {
 commit('SET_USER', user)
 },
 addToCart({ commit }, item) {
 commit('ADD_TO_CART', item)
 }
}

export default new Vuex.Store({
 state,
 mutations,
 actions})

在上面的代码中，我们定义了一个 state 对象，用于存储应用的状态。我们还定义了两个 mutation 函数：SET_USER 和 ADD_TO_CART，这些函数将用于更新 state 的值。

### 使用Store现在，我们可以在我们的组件中使用 Vuex Store 来管理状态。在登录页中，我们可能需要获取用户信息并保存到 Vuex Store 中。

javascript// components/Login.vue<template>
 <!-- login form -->
</template>

<script>
import { mapActions } from 'vuex'

export default {
 methods: {
 ...mapActions(['setUser'])
 },
 mounted() {
 this.setUser({ username: 'john', email: 'john@example.com' })
 }
}
</script>

在上面的代码中，我们使用 `mapActions` 函数将 Vuex Store 中的 setUser action 映射到我们的组件中。然后，在 mounted 钩子函数中，我们调用 setUser action 来保存用户信息。

### 购物车页面在购物车页面中，我们可能需要显示用户添加的商品，并允许用户删除商品。在 Vuex Store 中，我们可以使用 ADD_TO_CART mutation 函数来添加商品。

javascript// components/Cart.vue<template>
 <!-- cart list -->
</template>

<script>
import { mapMutations } from 'vuex'

export default {
 methods: {
 ...mapMutations(['addToCart'])
 },
 mounted() {
 this.addToCart({ id:1, name: '商品1', price:10 })
 }
}
</script>

在上面的代码中，我们使用 `mapMutations` 函数将 Vuex Store 中的 addToCart mutation 映射到我们的组件中。然后，在 mounted 钩子函数中，我们调用 addToCart mutation 来添加商品。

### 总结在本篇文章中，我们学习了如何使用 Vuex 来管理电商网站的状态。在 Vuex Store 中，我们定义了 state 对象、mutation 函数和 action 函数。我们还学习了如何在组件中使用 Vuex Store 来保存和更新状态。通过使用 Vuex，开发者可以更方便地共享和更新应用中的数据，从而提高代码的可维护性和可扩展性。

### 参考* [Vuex 文档]( />* [Vue Router 文档](