无服务器环境下Vue2+Vuetify实现页面刷新后购物车及购买按钮状态留存

一、手动实现（无需插件） #

因为无服务器支持，只能依赖浏览器本地存储（localStorage 或 sessionStorage）来持久化状态，这里推荐 localStorage（关闭浏览器后数据仍保留）。

1. 购物车状态持久化 #

• 添加/修改购物车时，将购物车数据转为JSON字符串存入localStorage
• 组件初始化时，读取localStorage数据恢复购物车状态

2. 「已购买」按钮状态持久化 #

• 用数组存储已购买商品的ID，同样存入localStorage
• 组件初始化时读取该数组，判断按钮是否禁用

代码示例

<template>
  <v-container>
    <v-card v-for="goodsItem in goodsList" :key="goodsItem.id" class="mb-4">
      <v-card-title>{{ goodsItem.name }}</v-card-title>
      <v-card-text>价格：{{ goodsItem.price }}元</v-card-text>
      <v-btn 
        @click="addToCart(goodsItem)" 
        :disabled="isItemPurchased(goodsItem.id)"
        class="mr-2"
      >
        加入购物车
      </v-btn>
      <v-btn 
        @click="markItemPurchased(goodsItem.id)" 
        :disabled="isItemPurchased(goodsItem.id)"
        color="success"
      >
        已购买
      </v-btn>
    </v-card>

    <!-- 购物车展示 -->
    <v-card class="mt-6">
      <v-card-title>购物车</v-card-title>
      <v-list>
        <v-list-item v-for="cartItem in cart" :key="cartItem.id">
          <v-list-item-title>{{ cartItem.name }} ×{{ cartItem.quantity || 1 }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-card>
  </v-container>
</template>

<script>
// 导入商品JSON数据
import goodsList from './goods.json'

export default {
  data() {
    return {
      goodsList,
      cart: [],
      purchasedItemIds: []
    }
  },
  created() {
    // 恢复购物车状态
    const savedCart = localStorage.getItem('cart')
    if (savedCart) {
      this.cart = JSON.parse(savedCart)
    }

    // 恢复已购买状态
    const savedPurchased = localStorage.getItem('purchasedItems')
    if (savedPurchased) {
      this.purchasedItemIds = JSON.parse(savedPurchased)
    }
  },
  methods: {
    addToCart(item) {
      // 避免重复添加（可根据需求调整逻辑）
      const existingItem = this.cart.find(cartItem => cartItem.id === item.id)
      if (existingItem) {
        existingItem.quantity += 1
      } else {
        this.cart.push({ ...item, quantity: 1 })
      }
      // 同步到localStorage
      localStorage.setItem('cart', JSON.stringify(this.cart))
    },
    markItemPurchased(itemId) {
      if (!this.purchasedItemIds.includes(itemId)) {
        this.purchasedItemIds.push(itemId)
        localStorage.setItem('purchasedItems', JSON.stringify(this.purchasedItemIds))
      }
    },
    isItemPurchased(itemId) {
      return this.purchasedItemIds.includes(itemId)
    }
  }
}
</script>

二、简化任务的插件推荐 #

1. vuex-persistedstate #

如果用Vuex管理购物车和已购买状态，这个插件可以自动将Vuex State持久化到本地存储，无需手动编写localStorage读写逻辑。

配置示例

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cart: [],
    purchasedItemIds: []
  },
  mutations: {
    ADD_TO_CART(state, item) {
      const existingItem = state.cart.find(cartItem => cartItem.id === item.id)
      existingItem ? existingItem.quantity += 1 : state.cart.push({ ...item, quantity: 1 })
    },
    MARK_PURCHASED(state, itemId) {
      if (!state.purchasedItemIds.includes(itemId)) {
        state.purchasedItemIds.push(itemId)
      }
    }
  },
  plugins: [
    createPersistedState({
      storage: window.localStorage,
      paths: ['cart', 'purchasedItemIds'] // 指定需要持久化的State字段
    })
  ]
})

2. vue-local-storage #

这是一个专为Vue设计的本地存储封装插件，支持响应式，可直接在组件中通过this.$localStorage操作，简化数据读写流程。

基本用法示例

// 安装后在main.js中引入
import Vue from 'vue'
import VueLocalStorage from 'vue-local-storage'

Vue.use(VueLocalStorage)

// 组件中使用
export default {
  data() {
    return {
      cart: this.$localStorage.get('cart') || [],
      purchasedItemIds: this.$localStorage.get('purchasedItems') || []
    }
  },
  methods: {
    addToCart(item) {
      // 购物车逻辑...
      this.$localStorage.set('cart', this.cart)
    },
    markItemPurchased(itemId) {
      // 已购买逻辑...
      this.$localStorage.set('purchasedItems', this.purchasedItemIds)
    }
  }
}

内容的提问来源于stack exchange，提问作者Begemot