Vue.js 2 Design Patterns and Best Practices

Thinking about state

As a thought exercise, let's start off by defining the goals for our application as well as any state, actions, and potential mutations. You don't have to add the following code to your application just yet, so feel free to read on, and we'll bring it all together at the end.

Let's start off by considering the state as a collection of key/value pairs:

const state = { count: 0 // number}

For our counter application, we just need one element of state—the current count. This will likely have a default value of 0 and will be of type number. As this is likely the only state inside of our application, you can consider this state to be application level at this point.

Next, let's think about any action types that the user may ...