Managing state with Pinia

Let’s now implement our state management system with Pinia.

Inside the src folder you’ll find that create-vue has setup a basic Hello World project for us. Since we opted in to Pinia for state management during the setup process, there is a src/stores/ folder with an example store counter defined in counter.ts.

Let’s rename src/stores/counter.ts to src/stores/gamestate.ts. We’ll use this file to define a Pinia store that represents and manages our game’s state.

Next, delete everything in that file, then import and use defineStore to start things off:

import { defineStore } from 'pinia'

export const gameState = defineStore({
  id: 'gamestate',

Here we begin defining gameState, something we’ll import into other parts of our game engine to get and mutate state.

A Pinia store has, in addition to an id, three main sections:

• the initial state of the store, called state
• methods to retrieve values from the store, called getters
• methods to mutate values from the store, called actions

We’ll define these in order, starting with state:

 5// Describe the initial state of our store:
 6state: () => ({
 7  energy: 0,            // Start at 0 energy
 8  capacitors: 1,        // Start with 1 capacitor
 9  circuits: 0,          // Start with 0 circuits
10  costMultiplier: 1.35, // Set rate of growth to 1.35
11  baseCosts: {
12    capacitors: {
13      energy: 3        // Capacitors base cost is
14    } as Cost,         // 3 energy
15    circuits: {
16      energy: 5,       // Circuits base cost is
17      capacitors: 5    // 5 energy and 5 capacitors
18    } as Cost
19  } as BaseCosts
20} as GameState),

The state property is where we describe our game’s state — the variables we want to keep track of and be able to pass into other parts of our game.

That takes care of our game’s initial state. Our next step is to define some methods to retrieve data from our game’s state manager. For the game we are building, we need to know the following:

• the total amount of each resource that we’ve either generated or purchased
• the next cost of something that is able to be purchased
• whether or not we can afford that cost

Before we define these getters, though, let’s build some helper functions based on the information we know we’ll need.

# Generating the next resource cost

One thing we’ll need to know throughout this game is the cost of the next resource we want to purchase. I’m using the word “resource” loosely here. In your game, you may call it an “upgrade” or “unlockable” or something like that. Either way, the basic premise is the same: I should be able to see the amount of other resources I will need to purchase something.

At the top of src/stores/gamestate.ts, just after the import statement, let’s define a helper function that will calculate the next resource cost of a given resource:

 4const generateNextCost = (state: any, resource: string): Cost => {
 5  // Get the base cost for the resource:
 6  const baseCosts = state.baseCosts[resource];
 7
 8  // Get how many of these resources we already own:
 9  const currentResourceCount = state[resource];
10
11  // Iterate over baseCosts to dynamically calculate
12  // the next cost for each cost type (e.g., energy,
13  // capacitors, circuits). The reduce function helps us
14  // accumulate the next cost values into a new `Cost`
15  // object that we can then return:
16  return Object.keys(baseCosts as BaseCosts).reduce(
17    (nextCost: Cost, costKey: string) => {
18      // Get the base cost--or, if baseCosts[costKey] is falsy,
19      // default the base cost to zero:
20      const baseCost = baseCosts[costKey] || 0;
21
22      // Calculate the next cost by multiplying the
23      // base cost by the cost multiplier raised to the
24      // power of the current resource count, and wrap it
25      // in Math.floor() to ensure the result is an integer:
26      nextCost[costKey as keyof Cost] = Math.floor(
27        baseCost * Math.pow(state.costMultiplier, currentResourceCount),
28      );
29      return nextCost;
30    },
31    {},
32  );
33};

With this function, we’ll be able to pass along a reference to our game’s current state and the string name of something we can buy, then get a Cost object in return containing the cost of that purchasable item:

1// For example:
2const nextCircuitCost = (state) => generateNextCost(state, "circuits");

The state parameter will come from Pinia; each getter will be passed the current state so we can always get the most current value of everything.

# Checking if player can afford next resource

Knowing the cost of the next purchase with generateNextCost, we can now create a second helper function to return whether we can actually afford it. This second helper function will compare the next cost with the player’s current inventory, then return true or false based on whether the player can afford it:

18const canAffordNext =
19
20  // Check if the player can afford the next resource
21  // based on the current state:
22  (state: GameState, resource: string): boolean => {
23    // Generate the cost of the next resource based on the current state:
24    const nextCost = generateNextCost(state, resource);
25
26    // Check if player has enough of each cost key:
27    return Object.keys(nextCost).every(
28      // For every cost key, see if the matching state key
29      // is greater than or equal (if yes, then player
30      // can afford):
31      (costKey) => {
32        // Get the current count of the resource,
33        // and default to zero if it doesn't exist:
34        const currentResourceCount = state[costKey] || 0;
35
36        // Get the cost of the resource,
37        // and default to zero if it doesn't exist:
38        const cost = nextCost[costKey as keyof Cost] || 0;
39
40        // Return whether the current count is
41        // greater than or equal to the cost:
42        return currentResourceCount >= cost;
43      },
44    );
45  };

With these two helper functions, we’re now ready to implement the getters for our Pinia store that holds our game’s state.

# Getter functions

Our src/stores/gamestate.ts file has two helper functions followed by the beginning of our Pinia store. The store has the state configured, and we’re now ready to get started on the next section: the getter functions.

Getter functions are used to “get” variables from the state and bring them into our presentation logic — which, for this game, are Vue components.

Just like how the initial state is defined in a state property, getters in a Pinia store are defined in a getters property. So let’s start by creating a getters property that we can put our getters in, along with our first getter:

86  } as GameState),
87
88  // Define our getters:
89  getters: {
90    getEnergy: (state) => state.energy,

Our first getter returns the total amount of energy in our current state. Notice how we provide state as a parameter. In Pinia, getters rely on state, so any getter function should, at a minimum, expect a state.

Since capacitors represent how much energy is generated per click and circuits represent how many clicks are automatically made per second, let’s create a getter for each of those next:

86// Define our getters:
87getters: {
88  getEnergy: (state) => state.energy,
89  energyPerClick: (state) => state.capacitors,
90  energyPerSecond: (state) => state.circuits,

Now let’s create some getters to provide resource costs.

We can start with a getter that leverages our generateNextCost helper function to use the state and a name of a resource to calculate the next cost of something:

86// Define our getters:
87getters: {
88  getEnergy: (state) => state.energy,
89  energyPerClick: (state) => state.capacitors,
90  energyPerSecond: (state) => state.circuits,
91  nextResourceCost: (state) =>
92    (resource:string) => generateNextCost(state, resource),

In the nextResourceCost getter, we pass along the state and also the name of a resource into generateNextCost. While this is a good general-use getter, we can create explicit getters for the resources we already know we’ll need to know the next cost of (i.e., capacitors and circuits) as well:

86// Define our getters:
87getters: {
88  getEnergy: (state) => state.energy,
89  energyPerClick: (state) => state.capacitors,
90  energyPerSecond: (state) => state.circuits,
91  nextResourceCost: (state) =>
92    (resource:string) => generateNextCost(state, resource),
93  nextCapacitorCost: (state) => generateNextCost(state, "capacitors"),
94  nextCircuitCost: (state) => generateNextCost(state, "circuits"),

Just like when we built the helper functions, we not only need to know what the next resource costs are but also whether we can afford the next resource. Let’s build our final getter functions that leverage the other helper function:

86// Define our getters:
87getters: {
88  getEnergy: (state) => state.energy,
89  energyPerClick: (state) => state.capacitors,
90  energyPerSecond: (state) => state.circuits,
91  nextResourceCost: (state) =>
92    (resource:string) => generateNextCost(state, resource),
93  nextCapacitorCost: (state) => generateNextCost(state, "capacitors"),
94  nextCircuitCost: (state) => generateNextCost(state, "circuits"),
95  canAffordCircuit: (state) => canAffordNext(state, "circuits"),
96  canAffordCapacitor: (state) => canAffordNext(state, "capacitors"),
97},

All of these getters will be used when we implement the game’s Vue components (our presentation — or “view” — layer). But we’re not quite ready to move on to our presentation logic just yet!

While getters are used to get data from our game’s state, actions are used to mutate — or change — data in our game’s state. Let’s define some actions that our game components will use to modify state values.

# Action functions

The third and final section of our Pinia store’s definition is its actions. Actions are functions that modify state values.

There are three actions that can happen within our game’s state: energy can be generated, a capacitor can be purchased, and a circuit can be purchased. Each of these actions will have their own separate function in our store’s actions property.

Let’s go ahead and define them all now:

102  // Define actions that mutate state values:
103  actions: {
104    // If amt given, just generate that much energy.
105    // Otherwise, assume click
106    generateEnergy(amt?:number) {
107      if(amt) {
108        this.energy += amt
109      } else {
110        this.energy += this.energyPerClick
111      }
112    },
113
114    addCircuit() {
115      if(this.canAffordCircuit) {
116        this.energy -= this.nextResourceCost("circuits")?.energy ?? 0
117        this.capacitors -= this.nextResourceCost("circuits")?.capacitors ?? 0
118        this.circuits++
119      }
120    },
121    addCapacitor() {
122      if(this.canAffordCapacitor) {
123        this.energy -= this.nextResourceCost("capacitors")?.energy ?? 0
124        this.capacitors++
125      }
126    }
127  }
128}) // End of pinia store definition

Notice how actions can call getters by using this, like how addCircuit() first checks if the player can even afford a circuit via this.canAffordCircuit.

Each of these actions are generally related to a button that the player can press, i.e., addCapacitor will be called when the player tries to buy a capacitor and addCircuit will be called when the player tries to buy a circuit. The dual-purpose generateEnergy function will either generate some amount that’s passed as the amt parameter or however much we currently generate per click.

With the state, getters, and actions all defined, our Pinia store is complete — and with it, most of the logic for our game! In the next part, we’ll bring all of this game logic onto the screen.