Hey there! Let's tackle your problem step by step—you're working with a Vue/Node/Vuex project, storing user data in cookies right now, but need real-time updates (like balance after a purchase). Here's what you need to know:

First: Can You Update Cookies? #

Absolutely! You can modify cookies directly in the browser using document.cookie, but there are a few caveats to keep in mind.

How to Update a Cookie #

You can create a helper function to simplify updating cookies, including setting expiration dates and paths:

// Helper function to update a cookie
function updateCookie(name, value, daysToExpire = 7) {
  let expires = "";
  if (daysToExpire) {
    const date = new Date();
    date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  // Encode value to handle special characters
  document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
}

// Example: Update user balance after purchase
updateCookie('userBalance', newBalanceFromApi);

The Catch with Cookies for Real-Time Updates #

While this works to update the cookie value, cookies don't trigger Vue's reactive updates automatically. That means after you update the cookie, you'll have to manually force your components to re-read the cookie value (like calling a method to refresh data) or implement a workaround to watch for cookie changes (which is clunky, since browsers don't have a native cookie change event).

Better Approach: Vuex + Cookies (Best of Both Worlds) #

For real-time UI updates, combining Vuex (your single source of truth for frontend state) with cookies (for persistent storage) is the way to go. Here's how to set it up:

1. Initialize Vuex State from Cookies #

First, load your initial user data from cookies when the Vuex store starts up:

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

Vue.use(Vuex);

// Helper to read cookies
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return decodeURIComponent(parts.pop().split(';').shift());
}

export default new Vuex.Store({
  state: {
    userBalance: getCookie('userBalance') || 0,
    // Add other user data fields here
  },
  mutations: {
    // Mutation to update balance in state AND cookie
    UPDATE_USER_BALANCE(state, newBalance) {
      state.userBalance = newBalance;
      // Sync the update to cookie for persistence
      document.cookie = `userBalance=${encodeURIComponent(newBalance)}; path=/; max-age=604800`; // 7-day expiration
    }
  },
  actions: {
    // Async action to handle purchase (call your Node backend)
    async completePurchase({ commit }, purchaseDetails) {
      try {
        const response = await fetch('/api/process-purchase', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(purchaseDetails)
        });
        const result = await response.json();
        // Trigger mutation to update state and cookie
        commit('UPDATE_USER_BALANCE', result.updatedBalance);
      } catch (error) {
        console.error('Purchase failed:', error);
      }
    }
  },
  getters: {
    // Getter to access balance in components
    getUserBalance: state => state.userBalance
  }
});

2. Use the State in Components #

In your Vue components, you can bind directly to the Vuex state (or getters) for real-time updates:

<template>
  <div>
    <p>Your Current Balance: {{ getUserBalance }}</p>
    <button @click="handlePurchase">Complete Purchase</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getUserBalance'])
  },
  methods: {
    ...mapActions(['completePurchase']),
    async handlePurchase() {
      await this.completePurchase({ amount: 50 });
      // UI will automatically update because Vuex state changed!
    }
  }
};
</script>

Key Benefits #

• Real-Time Updates: Vuex state changes trigger automatic reactive updates in your components—no manual refreshes needed.
• Persistence: Cookies ensure user data survives page reloads or browser restarts.
• Centralized State: All user data lives in one place, making it easier to manage across your app.

Important Note for Sensitive Data #

For sensitive data like user balances, always validate and calculate values on your Node backend. The frontend state (Vuex) and cookies should only reflect the data sent by your server—never trust frontend-only calculations for critical actions like purchases.

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