{"id":3599,"date":"2021-02-24T15:43:56","date_gmt":"2021-02-24T15:43:56","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3599"},"modified":"2021-02-24T15:59:48","modified_gmt":"2021-02-24T15:59:48","slug":"managing-state-in-vue-with-vuex","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/managing-state-in-vue-with-vuex","title":{"rendered":"Managing State in Vue with Vuex"},"content":{"rendered":"

Every app at some point will need to tackle one of the most contentious subjects in front end development: State Management. If you ask ten different developers how to manage state in an app, you’ll most likely get ten different answers, as everyone can have a slightly different approach if they were to build their own system. Thankfully, most frameworks provide some opinionated solutions for managing state in an app. For Vue, developers make use of the library Vuex<\/a>, which provides common patterns that makes managing state predictable and consistent across the entire app. Let’s look at how we can manage a simple TODO app using Vuex and as an added benefit, we’ll make it type safe using TypeScript.<\/p>\n

<\/p>\n

The Shell<\/h2>\n

Before we dive into Vuex, let’s look at the shell of our app. What we have is basically a single route app that should load a list of “todos”. Users should be able to tap the “+” button in the header to open a modal and add a new item, or click the item itself to edit an existing todo. We can mark an item as completed in the modal or by swiping the item to to reveal some additional buttons. As far as complexity goes, this is your basic CRUD app. While basic, and a bit contrived, these kinds of apps perform the same type of actions we do in most situations. So this is a good chance to discover some best practices.<\/p>\n

\n

Making things predictable<\/h2>\n

To bring some structure to our app, let’s add Vuex.<\/p>\n

vue add vuex@next\n<\/code><\/pre>\n
This will install the deps we need and perform any changes to our file system. With this, we get a new src\/store\/index.ts<\/code> file for us to work in. Now Vuex is based on a few concepts; A store, mutations, and actions.<\/p>\n
Store<\/h3>\n
In Vuex, a Store is a global state that is available throughout our app. This is just a fancy way of saying we have an object that we can mutate and reflect these changes in our UI.<\/p>\n
In our app, we can create our store to hold our various “todos”<\/p>\n
import { InjectionKey } from 'vue';\nimport { createStore, useStore as baseUseStore, Store } from 'vuex';\n\n\/\/ interfaces for our State and todos\nexport interface Todo {\n  id: number;\n  title: string;\n  note?: string;\n}\nexport interface State {\n  todos: Todo[];\n}\n\nexport const key: InjectionKey<Store<State>> = Symbol();\nconst state: State = {\n  todos: [\n    { title: 'Learn Vue', note: 'https:\/\/v3.vuejs.org\/guide\/introduction.html', id: 0, },\n    { title: 'Learn TypeScript', note: 'https:\/\/www.typescriptlang.org', id: 1, },\n    { title: 'Learn Vuex', note: 'https:\/\/next.vuex.vuejs.org', id: 2 },\n  ],\n};\n\nexport const store = createStore<State>({ state });\n\n\/\/ our own `useStore` composition function for types\nexport function useStore() {\n  return baseUseStore(key);\n}\n<\/code><\/pre>\n
With our todos setup and primed with some initial data, we can now think about how we modify that state, which is done through mutations.<\/p>\n
Mutations<\/h3>\n
Mutations, as the name implies, are a way to mutate our state. This is very different compared to something like Redux which uses immutable state, but achieves the same effect. With Mutations, we essentially have a handler that gets called and is passed the current state, along with any payload.<\/p>\n
For our use case, we’re going to make sure we can type our Mutations and provide some auto completion in our editors. We’ll start off with an object that will have all our mutations declared for us<\/p>\n
export const enum MUTATIONS {\n  ADD_TODO =  'ADD_TODO',\n  DEL_TODO =  'DEL_TODO'\n};\n<\/code><\/pre>\n
Next, we’ll actually define our mutations:<\/p>\n
import { createStore, useStore as baseUseStore, Store, MutationTree } from 'vuex';\n\n\/\/ ...\n\nconst mutations: MutationTree<State> = {\n  [MUTATIONS.ADD_TODO](state, newTodo: Todo){\n    state.todos.push({...newTodo});\n  },\n  [MUTATIONS.DEL_TODO](state, todo: Todo){\n    state.todos.splice(state.todos.indexOf(todo), 1);\n  }\n}\n<\/code><\/pre>\n
We have two mutations available; one to add a todo to our store and another to remove a todo. You may notice that we have a type on the todo<\/code>, but not on state, why is that? Well thanks to the MutationTree<\/code> type, the type information from State<\/code> that is passed in will flow throughout our mutations. Now the only thing we need to type is the payload, which can change depending on what mutation we call.<\/p>\n
The last thing to note about mutations is that they only care about changing state. So to change state at all with Vuex, you must use Mutations.<\/p>\n
Actions<\/h2>\n
Actions are like Mutations, but can perform asynchronous functions and call other mutations. This is a useful way to separate tasks in your app that depend on external resources and those that can be performed with the data at hand. Like mutations, we’ll split our actions up by a Type and then the actual implementation.<\/p>\n
export const enum ACTIONS { ADD_RND_TODO = 'ADD_RND_TODO'  };\n\nconst actions: ActionTree<State, any> = {\n  [ACTIONS.ADD_RND_TODO](store) {\n    fetch('https:\/\/fakerapi.it\/api\/v1\/texts?_quantity=1')\n      .then((res) => res.json())\n      .then(({ data }) => {\n        const newTodo: Todo = {\n          title: data[0].title,\n          id: Math.random(),\n          note: data[0].content,\n        };\n        store.commit(MUTATIONS.ADD_TODO, newTodo);\n      });\n  },\n};\n\n\n<\/code><\/pre>\n
Actions receive the context or actual store object as the first argument, followed by any payload that. With our action, we can make a request to some API, resolve that response, and kick off a mutation, all with the function. It doesn’t need to be a single mutation either, we could trigger one, two, or more mutations, or conditional trigger a mutation based on the resutl of a request (a side effect).<\/p>\n
Putting it all together<\/h2>\n
With these pieces together, our overall store should look something like this.<\/p>\n
import { InjectionKey } from 'vue';\nimport { createStore, useStore as baseUseStore, Store, MutationTree, ActionTree, } from 'vuex';\n\n\/\/ interfaces for our State and todos\nexport type Todo = { id: number; title: string; note?: string };\nexport type State = { todos: Todo[] };\n\nexport const key: InjectionKey<Store<State>> = Symbol();\nconst state: State = {\n  todos: [\n    {\n      title: 'Learn Vue',\n      note: 'https:\/\/v3.vuejs.org\/guide\/introduction.html',\n      id: 0,\n    },\n    {\n      title: 'Learn TypeScript',\n      note: 'https:\/\/www.typescriptlang.org',\n      id: 1,\n    },\n    { title: 'Learn Vuex', note: 'https:\/\/next.vuex.vuejs.org', id: 2 },\n  ],\n};\n\n\/*\n * Mutations\n * How we mutate our state.\n * Mutations must be synchronous\n *\/\nexport const enum MUTATIONS {\n  ADD_TODO =  'ADD_TODO',\n  DEL_TODO =  'DEL_TODO',\n  EDIT_TODO = 'EDIT_TODO'\n};\nconst mutations: MutationTree<State> = {\n  [MUTATIONS.ADD_TODO](state, newTodo: Todo) {\n    state.todos.push({ ...newTodo });\n  },\n  [MUTATIONS.DEL_TODO](state, todo: Todo) {\n    state.todos.splice(state.todos.indexOf(todo), 1);\n  },\n  [MUTATIONS.EDIT_TODO](state, todo: Todo) {\n    const ogIndex = state.todos.findIndex(t => t.id === todo.id)\n    state.todos[ogIndex] = todo;\n  },\n};\n\n\/*\n * Actions\n * Perform async tasks, then mutate state\n *\/\n\nexport const enum ACTIONS { ADD_RND_TODO = 'ADD_RND_TODO', };\nconst actions: ActionTree<State, any> = {\n  [ACTIONS.ADD_RND_TODO](store) {\n    fetch('https:\/\/fakerapi.it\/api\/v1\/texts?_quantity=1')\n      .then((res) => res.json())\n      .then(({ data }) => {\n        const newTodo: Todo = {\n          title: data[0].title,\n          id: Math.random(),\n          note: data[0].content,\n        };\n        store.commit(MUTATIONS.ADD_TODO, newTodo);\n      });\n  },\n};\n\nexport const store = createStore<State>({ state, mutations, actions });\n\n\/\/ our own useStore function for types\nexport function useStore() {\n  return baseUseStore(key);\n}\n<\/code><\/pre>\n
Parting Thoughts<\/h2>\n
As I stated early, State Management in an app is a bit of a personal preference. What I’ve shown here is simply one way that I<\/strong> would go about it. I’d encourage you all to find your own approaches, but keep a structure like this in your app for consistency. Cheers!<\/p>\n