vue学习笔记 Local Storage持久化存储 Vuex状态管理库购物车在不同页面间存储的实现原理

vue学习笔记(四)

Richard阿辰2024-05-172024-05-23

简述购物车在不同页面间存储的原理。以下是简要说明：

实现原理

要在不同页面之间存储购物车数据并保持其状态一致，可以使用以下方法：

全局状态管理：使用 Vuex 进行全局状态管理，使得购物车数据在整个应用中可访问。
本地存储：使用浏览器的 Local Storage 或 Session Storage 来持久化购物车数据，这样即使刷新页面或在不同页面之间导航，购物车数据也不会丢失。

具体实现步骤

1. 使用 Vuex 管理购物车状态

Vuex 是 Vue.js 的状态管理库，可以用于在整个应用中管理共享的状态。

安装和配置 Vuex：

npm install vuex --save

在 store.js 中创建 Vuex 存储：

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        cart: JSON.parse(localStorage.getItem('cart')) || []
    },
    mutations: {
        ADD_TO_CART(state, product) {
            state.cart.push(product);
            localStorage.setItem('cart', JSON.stringify(state.cart));
        },
        REMOVE_FROM_CART(state, productId) {
            state.cart = state.cart.filter(item => item.id !== productId);
            localStorage.setItem('cart', JSON.stringify(state.cart));
        },
        CLEAR_CART(state) {
            state.cart = [];
            localStorage.setItem('cart', JSON.stringify(state.cart));
        }
    },
    actions: {
        addToCart({
            commit
        }, product) {
            commit('ADD_TO_CART', product);
        },
        removeFromCart({
            commit
        }, productId) {
            commit('REMOVE_FROM_CART', productId);
        },
        clearCart({
            commit
        }) {
            commit('CLEAR_CART');
        }
    },
    getters: {
        cartItems: state => state.cart,
        cartItemCount: state => state.cart.length,
        cartTotalPrice: state => state.cart.reduce((total, item) => total + item.price * item.quantity, 0)
    }
});

2. 在主文件中注册 Vuex

在 main.js 中导入并使用 Vuex 存储：

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

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

3. 在组件中使用 Vuex 状态

在 ProductList.vue 中添加商品到购物车：

<template>
    <div>
        <div v-for="product in products" :key="product.id">
            <p>{{ product.name }}</p>
            <button @click="addToCart(product)">加号</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                products: [{
                        id: 1,
                        name: '商品 1',
                        price: 100
                    },
                    {
                        id: 2,
                        name: '商品 2',
                        price: 200
                    },
                    // 其他商品
                ]
            };
        },
        methods: {
            addToCart(product) {
                this.$store.dispatch('addToCart', {
                    ...product,
                    quantity: 1
                });
            }
        }
    };
</script>

在 ShoppingCart.vue 中显示购物车中的商品：

<template>
    <div>
        <h2>购物车</h2>
        <div v-for="item in cartItems" :key="item.id">
            <p>{{ item.name }} - 数量: {{ item.quantity }} - 价格: {{ item.price }}</p>
            <button @click="removeFromCart(item.id)">移除</button>
        </div>
        <p>总价: {{ cartTotalPrice }}</p>
        <button @click="clearCart">清空购物车</button>
    </div>
</template>

<script>
    export default {
        computed: {
            cartItems() {
                return this.$store.getters.cartItems;
            },
            cartTotalPrice() {
                return this.$store.getters.cartTotalPrice;
            }
        },
        methods: {
            removeFromCart(productId) {
                this.$store.dispatch('removeFromCart', productId);
            },
            clearCart() {
                this.$store.dispatch('clearCart');
            }
        }
    };
</script>