Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
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. 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. 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
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. 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
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.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
