【Vue】使用 Vuex 作为状态管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它使用单一状态树，这意味着这个对象包含了全部的应用层级状态，并且以一种相对集中的方式存在。这也意味着，通常单个项目中只有一个 Vuex store。Vuex 的核心概念和功能包括：
-
状态（State）：Vuex 使用单一状态树，即一个对象包含了整个应用的状态。状态存储是响应式的，当 Vue 组件从 store 中读取状态时，若状态发生变化，相关组件也会相应更新。
-
视图（View）：Vue 组件输出状态的可视化表示。
-
行为（Actions）：响应在 view 上的用户输入导致的状态变化。
除此之外，Vuex 还有以下几个核心概念：
-
Getters：允许组件从 store 中获取状态，同时可以对状态进行一些预处理。
-
Mutations：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
-
Actions：类似于 mutations，不同在于它们提交的是 mutations，而不是直接变更状态。Actions 可以包含任意异步操作。
-
Modules：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决这个问题，Vuex 允许我们将 store 分割成模块（module）。
Vuex 是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会自动更新。这也意味着 Vuex 中的状态不能直接改变，只能通过显式提交 mutations 来更改。
使用案例
假设我们正在开发一个购物车应用，用户可以将商品添加到购物车中，查看购物车中的商品，以及清空购物车。在这个例子中，我们将创建一个 Vuex store 来管理购物车的状态。
首先，你需要在你的 Vue 项目中安装和引入 Vuex：
pnpm install vuex --save
然后，在你的 Vue 项目中创建一个 Vuex store：
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cart: []
},
getters: {
cartItemCount: state => {
return state.cart.length
},
cartTotalPrice: state => {
return state.cart.reduce((total, item) => {
return total + item.price * item.quantity
}, 0)
}
},
mutations: {
addToCart(state, item) {
const found = state.cart.find(product => product.id === item.id)
if (found) {
found.quantity++
} else {
state.cart.push({ ...item, quantity: 1 })
}
},
removeFromCart(state, item) {
const index = state.cart.indexOf(item)
if (index > -1) {
state.cart.splice(index, 1)
}
},
clearCart(state) {
state.cart = []
}
},
actions: {
addToCart({ commit }, item) {
commit('addToCart', item)
},
removeFromCart({ commit }, item) {
commit('removeFromCart', item)
},
clearCart({ commit }) {
commit('clearCart')
}
}
})
在上面的代码中，我们定义了：
- State：购物车数组 cart。
- Getters：cartItemCount 和 cartTotalPrice 用于获取购物车中的商品数量和总价。
- Mutations：addToCart、removeFromCart 和 clearCart 用于修改购物车的状态。
- Actions：包装了 mutations 的方法，这里是 addToCart、removeFromCart 和 clearCart。
最后，在你的 Vue 组件中使用这个 store：
// 在一个组件中
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
...mapGetters(['cartItemCount', 'cartTotalPrice'])
},
methods: {
...mapActions(['addToCart', 'removeFromCart', 'clearCart']),
addItemToCart(item) {
this.addToCart(item)
},
removeItemFromCart(item) {
this.removeFromCart(item)
},
emptyCart() {
this.clearCart()
}
}
}
</script>
完整代码
<template>
<div class="shopping-cart">
<h2>购物车</h2>
<div v-if="cartItemCount === 0">
购物车为空。
</div>
<div v-else>
<ul>
<li v-for="(item, index) in cart" :key="index">
{{ item.name }} - {{ item.quantity }} x {{ item.price }}元
<button @click="removeItemFromCart(item)">移除</button>
</li>
</ul>
<p>总价: {{ cartTotalPrice }}元</p>
<button @click="emptyCart">清空购物车</button>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'ShoppingCart',
computed: {
...mapGetters(['cartItemCount', 'cartTotalPrice']),
cart() {
return this.$store.state.cart
}
},
methods: {
...mapActions(['removeFromCart', 'clearCart']),
removeItemFromCart(item) {
this.removeFromCart(item)
},
emptyCart() {
this.clearCart()
}
}
}
</script>
<style scoped>
.shopping-cart {
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
margin: 20px auto;
width: 300px;
}
.shopping-cart h2 {
color: #333;
}
.shopping-cart ul {
list-style-type: none;
padding: 0;
}
.shopping-cart ul li {
margin-bottom: 10px;
line-height: 1.6;
}
.shopping-cart button {
background-color: #42b983;
color: white;
border: none;
padding: 5px 10px;
margin-left: 10px;
border-radius: 3px;
cursor: pointer;
}
.shopping-cart button:hover {
background-color: #333;
}
</style>
