2024轻松学会 Vue 框架：Vue 框架快速入门指南（四）-CSDN博客

本文介绍了Vuex在前端开发中的应用，包括其基本概念、安装方法，以及如何使用Vuex管理Vue.js应用的状态，特别是通过购物车功能展示如何在组件间共享和更新状态。

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

五、状态管理

五、状态管理

Vuex 的基本概念和安装

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

以下是 Vuex 的基本概念和安装方法：

安装 Vuex

使用 npm 或 yarn 安装 Vuex：

npm install vuex --save

或

yarn add vuex

创建 store

创建一个 Vuex.Store 实例，这个实例将包含我们的状态、突变、操作和模块。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  modules: {
    count: {
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      },
      actions: {
        increment(context) {
          context.commit('increment');
        }
      }
    }
  }
});

访问 store

在 Vue 实例中，可以通过 this.$store 访问 store。

new Vue({
  el: '#app',
  store
});

状态（state）

store 的 state 对象包含了我们所有的状态。我们可以通过 this.$store.state 访问它。

console.log(this.$store.state.count);

突变（mutations）

mutations 是用来改变 state 的方法，它是同步的。我们可以通过 this.$store.commit 触发突变。

this.$store.commit('increment');

操作（actions）

actions 用于处理异步操作和业务逻辑，它可以调用突变。我们可以通过 this.$store.dispatch 触发操作。

this.$store.dispatch('increment');

模块（modules）

模块可以让我们更方便地组织代码，我们可以将 store 分割成多个模块。

以上就是 Vuex 的基本概念和安装方法。通过使用 Vuex，可以有效地管理 Vue.js 应用程序的状态，提高代码的可维护性和可读性。

使用 Vuex 管理应用状态

在 Vue.js 应用程序中，通常会有多个组件共享状态。当多个组件共享状态时，可能会导致状态在不同的组件中以不同的速度更新，从而导致状态的不一致。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库，它可以有效地解决这些问题。

以下是使用 Vuex 管理应用状态的步骤：

安装 Vuex

使用 npm 或 yarn 安装 Vuex：

npm install vuex --save

或

yarn add vuex

创建 store

创建一个 Vuex.Store 实例，这个实例将包含我们的状态、突变、操作和模块。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  modules: {
    count: {
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      },
      actions: {
        increment(context) {
          context.commit('increment');
        }
      }
    }
  }
});

访问 store

在 Vue 实例中，可以通过 this.$store 访问 store。

new Vue({
  el: '#app',
  store
});

状态（state）

store 的 state 对象包含了我们所有的状态。我们可以通过 this.$store.state 访问它。

console.log(this.$store.state.count);

突变（mutations）

mutations 是用来改变 state 的方法，它是同步的。我们可以通过 this.$store.commit 触发突变。

this.$store.commit('increment');

操作（actions）

actions 用于处理异步操作和业务逻辑，它可以调用突变。我们可以通过 this.$store.dispatch 触发操作。

this.$store.dispatch('increment');

模块（modules）

模块可以让我们更方便地组织代码，我们可以将 store 分割成多个模块。

以上就是使用 Vuex 管理应用状态的步骤。通过使用 Vuex，可以有效地管理 Vue.js 应用程序的状态，提高代码的可维护性和可读性。

示例：使用 Vuex 实现购物车功能

下面是一个使用 Vuex 实现购物车功能的简单示例：

首先，安装 Vue 和 Vuex：

npm install vue
npm install vuex

然后，创建一个简单的购物车应用：

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>购物车示例</title>
</head>
<body>
  <div id="app">
    <h1>购物车示例</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - 价格: {{ product.price }}
        <button @click="addToCart(product)">添加到购物车</button>
      </li>
    </ul>
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cart" :key="item.product.id">
        {{ item.product.name }} - 价格: {{ item.product.price }} x {{ item.quantity }}
      </li>
    </ul>
  </div>
</body>
</html>

main.js:

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

store.js:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    products: [
      { id: 1, name: '苹果', price: 1 },
      { id: 2, name: '香蕉', price: 2 },
      { id: 3, name: '橙子', price: 3 }
    ],
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      const cartItem = state.cart.find(item => item.product.id === product.id)
      if (cartItem) {
        cartItem.quantity++
      } else {
        state.cart.push({ product, quantity: 1 })
      }
    }
  },
  getters: {
    cartTotal(state) {
      return state.cart.reduce((total, item) => {
        return total + item.product.price * item.quantity
      }, 0)
    }
  }
})