What are some examples of using Vuex in Vue 3?

What are some examples of using Vuex in Vue 3?

Vuex is a state management library for Vue.js applications. Here are a few examples of how to use it in Vue 3.

Can you show me a simple example of a Vuex store?

Sure! Here's a basic Vuex store setup:

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

This creates a store with a count state and an increment mutation.

How do I use this store in a Vue component?

You can use the store in a Vue component like this:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

What about using Vuex with modules?

You can organize your store into modules for better structure. Here's an example:

const moduleA = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++;
    }
  }
};

const store = createStore({
  modules: {
    a: moduleA
  }
});