What is a Vuex Store?

What is a Vuex Store?

Vuex stores are containers for your app's state. A Vuex Store is the fundamental object in Vuex. A store wraps your app's state in a convenient object and gives you access to powerful features and patterns, like mutations and getters.

A Vuex Store is the fundamental object in Vuex. A store wraps your app's state in a convenient object and gives you access to powerful features and patterns, like mutations and getters.

Creating a Store

Vuex exports a Store class. So you can use require() in Node.js, or ESM import to pull in Vuex, and create a new store:

const Vuex = require('vuex');

// Equivalent:
import Vuex from 'vuex';

// Create a new store:
const store = new Vuex.Store({
  state: {
    count: 0
  }
});

You can also load Vuex via a script tag from a CDN like unpkg:

<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<script>
  const store = new Vuex.Store({
    state: {
      count: 0
    }
  });
</script>

Using a Store

You experiment with Vuex in Node.js without using Vue at all. For example, here's how you can create a new store and print the current state.

const Vuex = require('vuex');

const store = new Vuex.Store({
  state: { count: 0 }
});

store.state; // { count: 0 }

The canonical way to modify a Vuex store's state is via a mutation. You should not modify the state property directly. Below is how you can define mutations that increment and decrement the count property:

const Vuex = require('vuex');

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment: store => store.count += 1,
    decrement: store => store.count -= 1
  }
});

store.state; // { count: 0 }

store.commit('increment');
store.state; // { count: 1 }

store.commit('decrement');
store.state; // { count: 0 }

Although you can access a Vuex store's state directly with store.state, you typically wouldn't do that in a Vue app. That's because accessing store.state directly doesn't tie in to Vue's reactivity properly. Instead, you would define a Vuex getter.

const Vuex = require('vuex');

const store = new Vuex.Store({
  state: { count: 0 },
  getters: {
    count: store => store.count
  },
  mutations: {
    increment: store => store.count += 1,
    decrement: store => store.count -= 1
  }
});

store.getters.count; // 0

store.commit('increment');
store.getters.count; // 1

Adding the Store to Your App

In order to wire up your Vue app to use Vuex, you need to do two things:

  1. Call Vue.use(Vuex) before you define your app.
  2. Create a store and pass it to the Vue constructor. For example, new Vue({ store, computed, template })

For example, below is how you can wire up a Vue instance to use the count store:

  Vue.use(Vuex);

  const store = new Vuex.Store({
    state: { count: 0 },
    getters: {
      count: state => state.count
    },
    mutations: {
      increment: store => store.count += 1,
      decrement: store => store.count -= 1
    }
  });

  const app = new Vue({
    store,
    computed: {
      count: function() {
        return this.$store.getters.count;
      }
    },
    template: `
      <div>
        <h1>{{count}}</h1>
        <button v-on:click="$store.commit('increment')" id="increment">
          Increment
        </button>
        <button v-on:click="$store.commit('decrement')" id="decrement">
          Decrement
        </button>
      </div>
    `
  });

The Original Article can be found on masteringjs.io

vue vuex javascript programming web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)

Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex). Vue.js 3 is here! Learn from "Hello, Vue!" to building large apps with Vuex and Vue Router.