面向游戏辅助非盈利Vue应用的多地点买卖价格高效JS算法

Hey there! Since you're building a non-profit Vue-based game helper focused on variable item prices across different locations, let's walk through a practical, JavaScript-first approach that's easy to adapt to your needs:

First, you'll want a clean data structure to track locations, their items, and both base and current prices. The base prices act as your anchor for random fluctuations, while current prices are what users will see and interact with. You can store this in Vue's data or a state management tool like Pinia if your app scales:

// Example initial data (can live in Vue data or Pinia store)
const gamePriceData = {
  locations: [
    {
      id: "river-shop",
      name: "河畔商店",
      items: [
        {
          id: "copper-ore",
          name: "铜矿石",
          baseBuyPrice: 10, // Anchor price for randomization
          baseSellPrice: 8,
          currentBuyPrice: 10,
          currentSellPrice: 8
        },
        {
          id: "iron-ore",
          name: "铁矿石",
          baseBuyPrice: 20,
          baseSellPrice: 16,
          currentBuyPrice: 20,
          currentSellPrice: 16
        }
      ]
    },
    {
      id: "mountain-camp",
      name: "山顶营地",
      items: [
        {
          id: "copper-ore",
          name: "铜矿石",
          baseBuyPrice: 12,
          baseSellPrice: 9,
          currentBuyPrice: 12,
          currentSellPrice: 9
        }
      ]
    }
  ]
};

Next, build flexible functions to handle price fluctuations. You can customize the volatility (e.g., 80-120% of the base price) and even tie sell prices to buy prices for more realistic game logic:

// Generate a single randomized price based on a base value
function getRandomPrice(basePrice, minMultiplier = 0.8, maxMultiplier = 1.2) {
  const randomMultiplier = Math.random() * (maxMultiplier - minMultiplier) + minMultiplier;
  return Math.round(basePrice * randomMultiplier); // Round to integer for game-like pricing
}

// Update all prices for a single location
function updateLocationPrices(location) {
  location.items.forEach(item => {
    item.currentBuyPrice = getRandomPrice(item.baseBuyPrice);
    // Tie sell price to buy price (e.g., 70-90% of current buy price) for realism
    item.currentSellPrice = Math.round(item.currentBuyPrice * (Math.random() * 0.2 + 0.7));
  });
}

// Update prices for all locations at once
function updateAllPrices() {
  gamePriceData.locations.forEach(location => updateLocationPrices(location));
}

To add automatic price refreshes (like every 5 minutes), hook this into your Vue component's lifecycle:

// Inside your Vue component
mounted() {
  // Initial price shuffle on load
  this.updateAllPrices();
  // Auto-refresh every 5 minutes (300000ms)
  this.priceRefreshInterval = setInterval(() => {
    this.updateAllPrices();
  }, 300000);
},
beforeUnmount() {
  // Clean up interval to avoid memory leaks
  clearInterval(this.priceRefreshInterval);
}

Here's a stripped-down component to render the data, let users switch locations, and trigger manual refreshes:

<template>
  <div class="price-helper">
    <h2>各地物品价格查询</h2>
    
    <!-- Location selector -->
    <select v-model="selectedLocationId">
      <option v-for="loc in locations" :key="loc.id" :value="loc.id">
        {{ loc.name }}
      </option>
    </select>

    <!-- Manual refresh button -->
    <button @click="updateAllPrices" class="refresh-btn">刷新所有价格</button>

    <!-- Price table -->
    <table class="price-table">
      <thead>
        <tr>
          <th>物品名称</th>
          <th>买入价</th>
          <th>卖出价</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in selectedLocation.items" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.currentBuyPrice }}</td>
          <td>{{ item.currentSellPrice }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      locations: gamePriceData.locations,
      selectedLocationId: "river-shop",
      priceRefreshInterval: null
    };
  },
  computed: {
    selectedLocation() {
      return this.locations.find(loc => loc.id === this.selectedLocationId);
    }
  },
  methods: {
    getRandomPrice(basePrice, minMultiplier = 0.8, maxMultiplier = 1.2) {
      const randomMultiplier = Math.random() * (maxMultiplier - minMultiplier) + minMultiplier;
      return Math.round(basePrice * randomMultiplier);
    },
    updateLocationPrices(location) {
      location.items.forEach(item => {
        item.currentBuyPrice = this.getRandomPrice(item.baseBuyPrice);
        item.currentSellPrice = Math.round(item.currentBuyPrice * (Math.random() * 0.2 + 0.7));
      });
    },
    updateAllPrices() {
      this.locations.forEach(location => this.updateLocationPrices(location));
    }
  },
  mounted() {
    this.updateAllPrices();
    this.priceRefreshInterval = setInterval(() => this.updateAllPrices(), 300000);
  },
  beforeUnmount() {
    clearInterval(this.priceRefreshInterval);
  }
};
</script>

<style scoped>
.price-helper {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}
.refresh-btn {
  margin-left: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}
th, td {
  border: 1px solid #ddd;
  padding: 0.8rem;
  text-align: left;
}
th {
  background-color: #f5f5f5;
}
</style>

If you want to expand the app later, consider these tweaks:

• Price History: Add a priceHistory array to each item to track past prices and display trends
• Price Alerts: Let users set target prices (e.g., "Alert me when copper ore sells for >15") using Vue watchers
• Custom Volatility: Add a volatility property to items (e.g., rare items have wider price swings)
• Localization: Store location/item names in a separate i18n file if you need multi-language support

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