用Vuex做一个购物车的状态管理（一）Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中

架构

• 数据流管理
• api模块
  • 商品数据接口
• 商品数据
• 购物车数据

api一般是封装axios，前端向后端拿数据的。

这里我没有连接数据库进行传输真实数据，就是定义了一些假数据。

//假数据
const _products = [
    { 'id': 1, 'title': 'iPad 4 Mini', 'price': 500.01, 'inventory': 2 },
    { 'id': 2, 'title': 'H&M T-Shirt White', 'price': 10.99, 'inventory': 10 },
    { 'id': 3, 'title': 'Charli XCX - Sucker CD', 'price': 19.99, 'inventory': 5 },
    { 'id': 4, 'title': 'Samsung Galaxy S21', 'price': 799.99, 'inventory': 8 },
    { 'id': 5, 'title': 'Sony WH-1000XM4', 'price': 349.99, 'inventory': 15 },
    { 'id': 6, 'title': 'MacBook Pro 16"', 'price': 2399.00, 'inventory': 3 },
    { 'id': 7, 'title': 'Bose SoundLink Mini', 'price': 149.99, 'inventory': 20 },
    { 'id': 8, 'title': 'Nike Air Max 270', 'price': 149.99, 'inventory': 12 },
    { 'id': 9, 'title': 'Canon EOS R5', 'price': 3899.00, 'inventory': 7 },
    { 'id': 10, 'title': 'Dell XPS 13', 'price': 1199.99, 'inventory': 5 },
    { 'id': 11, 'title': 'JBL Flip 5', 'price': 89.95, 'inventory': 25 },
    { 'id': 12, 'title': 'Apple Watch Series 6', 'price': 749.00, 'inventory': 10 },
    { 'id': 13, 'title': 'GoPro HERO 9 Black', 'price': 399.99, 'inventory': 6 },
    { 'id': 14, 'title': 'Fitbit Charge 4', 'price': 149.95, 'inventory': 18 },
    { 'id': 15, 'title': 'Nintendo Switch', 'price': 299.99, 'inventory': 14 },
    { 'id': 16, 'title': 'Acer Predator Helios 300', 'price': 1399.99, 'inventory': 4 },
    { 'id': 17, 'title': 'Logitech MX Master 3', 'price': 99.99, 'inventory': 22 },
    { 'id': 18, 'title': 'iPhone 12 Pro Max', 'price': 1099.99, 'inventory': 6 },
    { 'id': 19, 'title': 'Samsung QLED TV 55"', 'price': 799.99, 'inventory': 2 },
    { 'id': 20, 'title': 'Apple AirPods Pro', 'price': 249.00, 'inventory': 12 }
];



export default {
//回调函数解决异步问题
    getProducts(cb){
        setTimeout(() => cb(_products),100)
    }
}
//模块化导出

定义store去createStore定义好全局状态和子仓库

import { createStore, } from 'vuex'

import products from './module/products.js'
import cart from './module/cart.js'



export default createStore({
    //全局状态
    state:{
        count:0
    },
    //模块化状态
    //分子仓库
    modules:{
        cart,//购物车状态
        products//商品状态
    }

})

vuex 比 pinia 复杂 ，vuex中有中央仓库的概念 在这index.js就是一个中央仓库的概念 在这定义的store都不会创建两个仓库 都是单例模式 属于是单一状态树

modules中的子仓库

import  API  from '../../api/shop'
const state = {
    all: []
}

const getters = {

}

const actions = {
    // api请求 -> 提交mutations
    // commit ? vuex给actions 可以commit mutations 的API
    getAllProducts({commit}){
        API.getProducts((products) =>{
            console.log(products);
            commit('setProducts',products)
            
        })
    }
}

const mutations = {
    //vuex mutations api 第一个参数是state 第二个执行mutations 的commit
    setProducts(state,products){
        state.all = products
    }
}
// store.product.all
export default {
    namespaced:true,
    state,
    getters,
    actions,
    mutations
}

产品的子仓库由中央仓库管理，就像中国的中央权力管理地方一样，但也会给地方很多的权限，中央并不会过多参与

mutations就像是财务一样

1. Mutation 的基本概念

• 定义：mutation 是一个方法，用于定义如何改变 Vuex 状态（state）。每个 mutation 都是一个函数，它接受当前的状态作为第一个参数，以及额外的参数（通常是载荷）作为第二个参数。
• 同步操作：mutation 必须是同步函数，这意味着它不能包含异步操作。异步操作应该放在 actions 中进行。

2. Mutation 的使用

定义 Mutation

在 Vuex 中，mutation 通常在 Vuex 的 store 中定义。mutation 是一个对象的属性，这些属性都是函数。每个函数接收两个参数：当前的 state 和载荷（payload）。

// store/index.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++; // 修改状态
    },
    incrementBy(state, payload) {
      state.count += payload.amount; // 使用载荷进行状态修改
    }
  }
});

调用 Mutation

mutation 通过 commit 方法调用。commit 方法用于触发某个 mutation，并传递相应的载荷。

// 在组件中调用 mutation
methods: {
  increment() {
    this.$store.commit('increment');
  },
  incrementBy(amount) {
    this.$store.commit('incrementBy', { amount });
  }
}

3. Mutation 的特点

1. 同步性：mutation 必须是同步的。这是为了保持状态的可预测性和追踪性，使得每一次状态的变化都可以被记录和调试。
2. 变更的唯一方式：在 Vuex 中，mutation 是唯一允许直接修改状态的方式。所有的状态更新都必须通过 mutation。
3. 载荷：mutation 可以接受载荷（payload），这是一个额外的参数，用于传递给 mutation 的数据。载荷可以是任何类型的值，比如对象、数组、字符串等。

4. Mutation 的实际应用

假设你有一个购物车应用，用户可以添加商品到购物车中。在 Vuex 中，你可能会定义以下 mutation：

// store/index.js
export default new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      state.cart.push(product);
    },
    removeFromCart(state, productId) {
      state.cart = state.cart.filter(product => product.id !== productId);
    }
  }
});

调用 mutation：

// 在组件中调用 mutation
methods: {
  addProduct(product) {
    this.$store.commit('addToCart', product);
  },
  removeProduct(productId) {
    this.$store.commit('removeFromCart', productId);
  }
}

总的来说，你既需要向财管去写入你要完成的操作，然后还需要commit去提交给它才能对数据进行更新或者是修改

组件上显示出数据

<template>
  <div>
    <ul>
      <li v-for=" (item,index) in products " :key="index" >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore()
const products = computed(() => store.state.products.all) 
// commit mutation dispatch 派出一个action 
store.dispatch('products/getAllProducts');
</script>

<style lang="scss" scoped>

</style>

当然还需要把store挂载到app上在main.js中

import { createApp } from 'vue'
import store  from '../store'
import App from './App.vue'
const app = createApp(App)


app.use(store)
.mount('#app')

效果 - 能给页面上返回后端给出的数据用vuex进行管理

你就可以模拟出后端给出数据，在页面上展示出来。

在vue的插件中，你也可以看到vuex管理的数据仓库products。

下篇

在下一篇中，会写完购物车cart的子仓库，在页面实现vuex管理数据的增删改查。