Vuex: State Management for Vue.js Applications

Vuex manages shared application state in Vue.js through a single reactive store object. It organizes state logic into a structured flow using state, synchronous mutations, and optional asynchronous actions. Components access state using computed(), and commit changes using store.commit(), ensuring consistent updates without tightly coupled local state.

Installing Vuex

Vuex is a separate library that works alongside Vue.js to manage shared state. Installing the correct Vuex version is important to ensure compatibility with the Vue framework version you are using.

For Vue 3, install Vuex 4:

npm install vuex@4

For Vue 2, install Vuex 3:

npm install vuex@3

Creating the Vuex Store

The Vuex store is the central place where the application"s shared state lives. It organizes the state and provides controlled methods to change it, keeping state management predictable and centralized.

// store/index.js

import { createStore } from 'vuex'

const store = createStore({

state() {

return {

count: 0

}

},

mutations: {

increment(state) {

state.count++

}

}

})

export default store

Explanation:

• state() returns the reactive state object.
• mutations define synchronous methods to mutate state.
• createStore() initializes the Vuex store instance.

Using Vuex in the Vue App

To enable global state management, the Vuex store must be connected to the Vue application. This integration allows all components to access and interact with the shared state easily.

// main.js

import { createApp } from 'vue'

import App from './App.vue'

import store from './store'

const app = createApp(App)

app.use(store)

app.mount('#app')

Explanation:

• app.use(store) injects the Vuex store into the app.
• Components can now access and modify state using Vuex APIs.

Accessing State in Components

Components need a way to read the reactive state from the Vuex store. Using built-in Vue hooks and computed properties ensures components stay in sync with the global state.

<script setup>

import { computed } from 'vue'

import { useStore } from 'vuex'

const store = useStore()

const count = computed(() => store.state.count)

</script>

Explanation:

• useStore() gives access to the Vuex instance.
• computed() keeps count reactive to state changes.

Committing Mutations

Vuex enforces that all state changes happen through explicit mutation functions. Components trigger these changes by calling store.commit() with the mutation name. To update the state, call store.commit() with the mutation name.

<script setup>

import { useStore } from 'vuex'

const store = useStore()

function incrementCount() {

store.commit('increment')

}

</script>

Explanation:

• Mutations must be triggered using commit() and the mutation name.
• Only predefined mutations are allowed to change state.

Managing Video State with Vuex

Vuex manages shared media state across components like a video player, playlist, and control bar. Instead of prop drilling, global state allows each component to reactively access or update playback data.

Extend Store with Video State

To manage video playback or selection globally, a video-related state like currentVideo, should be stored in Vuex. This allows multiple components to access or update video data consistently. Add currentVideo to your store"s state, and a setVideo mutation to update it.

// store/index.js

import { createStore } from 'vuex'

const store = createStore({

state() {

return {

count: 0,

currentVideo: null

}

},

mutations: {

increment(state) {

state.count++

},

setVideo(state, videoUrl) {

state.currentVideo = videoUrl

}

}

})

export default store

Explanation:

• currentVideo holds the active video URL or identifier.
• setVideo() updates the video state with a new URL.

Accessing Video State in a Component

Video state stored in Vuex can be accessed inside any component using useStore() and made reactive with computed(). This allows the video player or other UI elements to respond automatically to state changes.

Example: Retrieve the Current Video URL from Vuex to Use as the Video Source

<template>

<video controls width="100%" v-if="videoUrl">

<source :src="videoUrl" type="video/mp4" />

</video>

</template>

<script setup>

import { computed } from 'vue'

import { useStore } from 'vuex'

const store = useStore()

const videoUrl = computed(() => store.state.currentVideo)

</script>

Explanation:

• The v-if ensures the video element only renders if a video is selected.
• Any component can reactively read currentVideo without prop passing.

Updating Video from Other Components

Changing the active video happens by committing a mutation in Vuex, ensuring all related components update their views automatically and remain synchronized.

<script setup>

import { useStore } from 'vuex'

const store = useStore()

function selectVideo(url) {

store.commit('setVideo', url)

}

</script>

Explanation:

• Clicking a thumbnail or selecting from a playlist can trigger selectVideo().
• All components observing currentVideo will update in real-time.

Example: Dynamic Video Player Using Vuex State

<template>

<video controls width="100%" v-if="videoUrl">

<source :src="videoUrl" type="video/mp4" />

</video>

</template>

<script setup>

import { computed } from 'vue'

import { useStore } from 'vuex'

const store = useStore()

const videoUrl = computed(() => store.state.currentVideo)

</script>

Explanation:

• v-if="videoUrl" ensures the player renders only when a video is selected.
• The player reacts to state changes globally without requiring prop drilling.